css实现实心三角形、有边框的三角形和空心三角形

最新推荐文章于 2021-11-26 10:57:16 发布

青崖林夕

最新推荐文章于 2021-11-26 10:57:16 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/u012757419/article/details/118578639

版权

本文介绍了如何使用CSS来创建实心、有边框以及空心三角形的方法，详细讲解了不同类型的三角形实现过程，特别是空心三角形的制作，它是通过对有边框三角形的定位调整来达成的。

摘要由CSDN通过智能技术生成

1、实心三角形

<div class="up"></div> <!--向上的三角形-->
<div class="down"></div> <!--向下的三角形-->
<div class="left"></div> <!--向左的三角形-->
<div class="right"></div> <!--向右的三角形-->

/*想获取朝那边三角形,给相反的一边设置颜色,font-size: 0;line-height: 0;可以兼容ie6*/
.up{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #f00;font-size: 0;line-height: 0;}
.down{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #f00;font-size: 0;line-height: 0;}
.left{width: 0;height: 0;border-top: 20px solid transparent;border-right: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;}
.right{width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid #f00;border-b

最低0.47元/天解锁文章