純Css實現三角形、氣泡框的三角形

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rWU68bRK-1647095723236)(C:\Users\zwz\AppData\Roaming\Typora\typora-user-images\image-20211118140943376.png)]

<div class="triangle_border_up"></div>

?
?

?
?
?

<div class="triangle_border_right"></div>

/向上/
.triangle_border_up {
width: 0;
height: 0;
border-width: 0 30px 30px;
border-style: solid;
border-color: transparent transparent #FFCCCC;
/透明 透明 黃/
margin: 40px auto;
position: relative;
}

/*向下*/.triangle_border_down {width: 0;height: 0;border-width: 30px 30px 0;border-style: solid;border-color: #FFCCCC transparent transparent;/*黃 透明 透明 */margin: 40px auto;position: relative;}/*向左*/.triangle_border_left {width: 0;height: 0;border-width: 30px 30px 30px 0;border-style: solid;border-color: transparent #FFCCCC transparent transparent;/*透明 黃 透明 透明 */margin: 40px auto;position: relative;}/*向右*/.triangle_border_right {width: 0;height: 0;border-width: 30px 0 30px 30px;border-style: solid;border-color: transparent transparent transparent #FFCCCC;/*透明 透明 透明 黃*/margin: 40px auto;position: relative;}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZY3Fl3sS-1647095723243)(C:\Users\zwz\AppData\Roaming\Typora\typora-user-images\image-20211118141139605.png)]

<div class="triangle_border_nw"></div>

?
?

?
?
?

<div class="triangle_border_se"></div>

/* 左上 */
.triangle_border_nw {
width: 0;
height: 0;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: #CCCCFF transparent transparent transparent;
margin: 40px auto;
position: relative;
}

/* 左下 */.triangle_border_sw {width: 0;height: 0;border-width: 30px 0 0 30px;border-style: solid;border-color: transparent transparent transparent #CCCCFF;margin: 40px auto;position: relative;}/* 右上 */.triangle_border_ne {width: 0;height: 0;border-width: 30px 0 0 30px;border-style: solid;border-color: #CCCCFF transparent transparent transparent;margin: 40px auto;position: relative;}/* 右下 */.triangle_border_se {width: 0;height: 0;border-width: 30px 30px 0 0;border-style: solid;border-color: transparent #CCCCFF transparent transparent;margin: 40px auto;position: relative;}

總結

以上是生活随笔為你收集整理的纯CSS实现三角形图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。