CSS偽類選擇器實現三角形
阿新 • • 發佈：2021-12-14
使用css實現常用的三角效果
專案中三角：
.breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px solid #f9c700; .breadcrumb-title{ text-align: center; font-size: @fontC; //通過定義一個偽類after &:after{ position: absolute; content:''; left: 89px; top: 39px; border-top: 9px solid @colorM; //border-left和border-right換成透明色 才能形成三角形 不然是長方形 border-left: 12px solid transparent; border-right: 12px solid transparent; //background-color: red;} }
詳細講解
實現三角形的方式很多種。比較簡單又比較常用的是利用偽類選擇器，在網頁上也有很多用到這種效果，比如tips資訊提示框。下面是自己寫的實心三角形，原理其實很簡單，程式碼都能看懂。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tri_top, .tri_right, .tri_bottom, .tri_left{
width: 150px;
height: 100px;
background: #CCCCCC;
border
空心三角形該怎樣實現呢？看看以下程式碼，你會發現其實程式碼跟實心三角形的程式碼都是差不多。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tri_top, .tri_right, .tri_bottom, .tri_left{
width: 150px;
height: 100px;
border: 1px solid #000000;
border-radius: 8px;
margin: 50px 50px;
position: relative;
float: left;
}
.tri_top:before{
content: "";
width: 0px;
height: 0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #000000;
position: absolute;
top: -15px;
left: 65px;
}
.tri_top:after{
content: "";
width: 0px;
height: 0px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 14px solid #FFFFFF;
position: absolute;
top: -14px;
left: 66px;
}
.tri_right:before{
content: "";
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #000000;
position: absolute;
top: 39px;
left: 150px;
}
.tri_right:after{
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 14px solid #FFFFFF;
position: absolute;
top: 40px;
left: 149px;
}
.tri_bottom:before{
content: "";
width: 0px;
height: 0px;
border-top: 15px solid #000000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
top: 101px;
left: 69px;
}
.tri_bottom:after{
content: "";
width: 0px;
height: 0px;
border-top: 14px solid #FFFFFF;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
position: absolute;
top: 100px;
left: 70px;
}
.tri_left:before{
content: "";
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #000000;
position: absolute;
top: 40px;
left: -15px;
}
.tri_left:after{
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-right: 14px solid #FFFFFF;
position: absolute;
top: 41px;
left: -14px;
}
</style>
</head>
<body>
<div class="tri_top"></div> <!--三角形在上邊-->
<div class="tri_right"></div> <!--三角形在右邊-->
<div class="tri_bottom"></div> <!--三角形在底邊-->
<div class="tri_left"></div> <!--三角形在左邊-->
</body>
</html>
寫在最後的一個道理： 三角形往哪個方向，那個方向無需設定border，而相反方向設定border顏色，相鄰兩邊的border設為透明。這樣就可實現各個方向的三角形。
實心三角形利用CSS中的偽元素· ：before實現，再利用border的transparent屬性即可達到效果。而空心三角形是在空心三角形的基礎上再加上偽元素：after實現。偽元素：before實現的是一個實心的三角形，偽元素：after實現的是空心的三角形，進而把實心的三角形覆蓋，利用絕對定位的top與left的差值絕對了三角形線的粗細而達到如圖的效果。
本文來自部落格園，作者：喆星高照，轉載請註明原文連結：https://www.cnblogs.com/houxianzhou/p/15688815.html