CSS實(shí)現(xiàn)空心尖角的示例代碼
我要評(píng)論我記得之前刷面試題的時(shí)候，CSS面試題里面赫然有一題是“如何用CSS實(shí)現(xiàn)三角形”，我覺(jué)得這個(gè)問(wèn)題確實(shí)很經(jīng)典，我上的前端培訓(xùn)班當(dāng)初就講過(guò)。
大概思路如下：
先把這個(gè)元素（更多時(shí)候用的是偽元素）的寬高設(shè)為0，然后給它設(shè)置一個(gè)較大的border-width（大小根據(jù)三角形的大小來(lái)決定）。這樣，4條邊實(shí)際上都是三角形了。
然后根據(jù)三角形的方向和顏色，只設(shè)置其中的一個(gè)邊框顏色為目標(biāo)顏色，其他三個(gè)邊框顏色都為透明色，三角形就出來(lái)了。
然后再隨便設(shè)置一下定位，就可以做成類(lèi)型對(duì)話框尖角的效果。
簡(jiǎn)單寫(xiě)一個(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)氣死我：
本來(lái)這個(gè)三角形就是用4條邊框硬擠出來(lái)的，哪里來(lái)的多余的邊框用來(lái)描邊？
最后我還是做到了，效果如下：
思路是這樣的：
因?yàn)檫@里有描邊，所以border要用在描邊這里，那么三角形就不能用border來(lái)實(shí)現(xiàn)了。
我這里實(shí)際上并不是三角形的，而是正方形的：
這樣看就很明顯了，實(shí)際上是放了一個(gè)正方形在這里，正方形的背景色跟里面的背景色一樣，所以看不出來(lái)；
只給這個(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)
本篇文章主要介紹了CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-29