Rumah > Artikel > hujung hadapan web > CSS和CSS3实现画出三角形元素
这篇文章主要介绍了关于CSS和CSS3实现画出三角形元素,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
前端页面偶尔需要有三角形图标或者三角形样式,现在图标的三角形大多用字体图标去实现了,但是有些大的三角形模块还是需要前端运用CSS样式去画出来的,下面介绍各种角度的三角形css样式代码,希望能对大家带来帮助
1:triangle-up
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
2:triangle-down
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
3:triangle-left
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
4:triangle-right
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }
5::triangle-topleft
#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
6:triangle-topright
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
7:triangle-bottomleft
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }
8:triangle-bottomright :
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }
以上就是本篇文章的全部内容了,更多相关内容请关注PHP中文网。
相关推荐:
Atas ialah kandungan terperinci CSS和CSS3实现画出三角形元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!