CSS實現(xiàn)空心尖角的示例代碼
發(fā)布時間：2023-11-22 16:13:48 作者：努力學(xué)前端的南宮 
我要評論
我要評論 web開發(fā)中，三角形指示箭頭最為常見，本文就來介紹了CSS實現(xiàn)空心尖角的示例代碼，具有一定的參考價值，感興趣的可以了解一下
我記得之前刷面試題的時候，CSS面試題里面赫然有一題是“如何用CSS實現(xiàn)三角形”，我覺得這個問題確實很經(jīng)典，我上的前端培訓(xùn)班當初就講過。
大概思路如下：
先把這個元素（更多時候用的是偽元素）的寬高設(shè)為0，然后給它設(shè)置一個較大的border-width（大小根據(jù)三角形的大小來決定）。這樣，4條邊實際上都是三角形了。
然后根據(jù)三角形的方向和顏色，只設(shè)置其中的一個邊框顏色為目標顏色，其他三個邊框顏色都為透明色，三角形就出來了。
然后再隨便設(shè)置一下定位，就可以做成類型對話框尖角的效果。
簡單寫一個示例：
<!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)了空心的尖角，差點氣死我：
本來這個三角形就是用4條邊框硬擠出來的，哪里來的多余的邊框用來描邊？
最后我還是做到了，效果如下：
思路是這樣的：
因為這里有描邊，所以border要用在描邊這里，那么三角形就不能用border來實現(xiàn)了。
我這里實際上并不是三角形的，而是正方形的：
這樣看就很明顯了，實際上是放了一個正方形在這里，正方形的背景色跟里面的背景色一樣，所以看不出來；
只給這個正方形設(shè)置了兩條邊框，顏色跟外圈的顏色一致；
然后給正方形旋轉(zhuǎn)一個方向，讓有邊框的朝上，再微調(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);
}修改前的效果是這樣，實心的藍色三角形。
到此這篇關(guān)于CSS實現(xiàn)空心尖角的示例代碼的文章就介紹到這了,更多相關(guān)CSS空心尖角內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下2017-09-29