欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)空心尖角的示例代碼

  發(fā)布時(shí)間：2023-11-22 16:13:48   作者：努力學(xué)前端的南宮   我要評論
web開發(fā)中，三角形指示箭頭最為常見，本文就來介紹了CSS實(shí)現(xiàn)空心尖角的示例代碼，具有一定的參考價(jià)值，感興趣的可以了解一下

我記得之前刷面試題的時(shí)候，CSS面試題里面赫然有一題是“如何用CSS實(shí)現(xiàn)三角形”，我覺得這個(gè)問題確實(shí)很經(jīng)典，我上的前端培訓(xùn)班當(dāng)初就講過。

大概思路如下：

先把這個(gè)元素（更多時(shí)候用的是偽元素）的寬高設(shè)為0，然后給它設(shè)置一個(gè)較大的border-width（大小根據(jù)三角形的大小來決定）。這樣，4條邊實(shí)際上都是三角形了。

然后根據(jù)三角形的方向和顏色，只設(shè)置其中的一個(gè)邊框顏色為目標(biāo)顏色，其他三個(gè)邊框顏色都為透明色，三角形就出來了。

然后再隨便設(shè)置一下定位，就可以做成類型對話框尖角的效果。

簡單寫一個(gè)示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.sjx {
				width: 0;
				height: 0;
				border: 20px solid transparent;
				border-bottom-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="sjx"></div>
	</body>
</html>

結(jié)果昨天我看到UI圖里面出現(xiàn)了空心的尖角，差點(diǎn)氣死我：

本來這個(gè)三角形就是用4條邊框硬擠出來的，哪里來的多余的邊框用來描邊？

最后我還是做到了，效果如下：

思路是這樣的：

因?yàn)檫@里有描邊，所以border要用在描邊這里，那么三角形就不能用border來實(shí)現(xiàn)了。

我這里實(shí)際上并不是三角形的，而是正方形的：

這樣看就很明顯了，實(shí)際上是放了一個(gè)正方形在這里，正方形的背景色跟里面的背景色一樣，所以看不出來；

只給這個(gè)正方形設(shè)置了兩條邊框，顏色跟外圈的顏色一致；

然后給正方形旋轉(zhuǎn)一個(gè)方向，讓有邊框的朝上，再微調(diào)一下位置，就可以了。

代碼如下：（定位的代碼我就省略了）

body.theme-deep .el-popper[x-placement^='bottom'] .popper__arrow::after, body.theme-deep .el-select-dropdown.el-popper[x-placement^='bottom'] .popper__arrow::after, body.theme-deep .el-dropdown-menu.el-popper[x-placement^='bottom'] .popper__arrow::after {
    width: 9px;
    height: 9px;
    border: none;
    border-top: 1px solid #0c84ff;
    border-right: 1px solid #0c84ff;
    background: #0b3277;
    transform: rotate(-45deg) translateX(2px) translateY(1px);
}

修改前的效果是這樣，實(shí)心的藍(lán)色三角形。

到此這篇關(guān)于CSS實(shí)現(xiàn)空心尖角的示例代碼的文章就介紹到這了,更多相關(guān)CSS空心尖角內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！ 

相關(guān)文章

最新評論