生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现三角形图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
純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实现三角形图标的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
