如何用CSS画三角形

最新推荐文章于 2023-11-01 14:11:45 发布

暖风吹

最新推荐文章于 2023-11-01 14:11:45 发布

阅读量174

点赞数

分类专栏： css小知识点文章标签： html css

本文链接：https://blog.csdn.net/qq_44366078/article/details/116030354

版权

css小知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何通过CSS的边框属性来创建各种形状的三角形。当元素的宽高设置为0，仅设置边框宽度时，可以通过调整不同边框颜色和透明度来实现三角形效果。例如，通过将不需要的边框设置为透明，可以创建单色三角形，或者通过保留特定边框来创建带有组合边框的三角形。这种方法提供了灵活且易于理解的方式来在网页设计中利用CSS绘制几何形状。

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

核心：利用边框属性的特点

先来看一段代码：

.first{
   width: 0;
   height: 0;
   border-top: 100px solid blue;
   border-right: 100px solid yellow;
   border-bottom: 100px solid green;
   border-left: 100px solid  red;
}
 <div class="first"></div>

运行效果：

可以发现，当一个盒子的宽高都设为0，只设置边框宽度时，每条边框显示的样子就是一个三角形。

所以，想要得到相应的三角形，只需要给相关的边框宽度，多余的边框隐藏掉就行（注意，是隐藏，不是删除），隐藏最好的方法就是把第三个属性设置为 transparent(透明的)，比如现在只想要上面的蓝色三角形，那就只需要左、上、右三条边框，同时把左右边框隐藏就行了。

代码如下：

    .second{
      width: 0;
      height: 0;
      border-top: 100px solid blue;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
    }
     <div class="second"></div>

运行结果：

同理，想要得到上边框和左边框组成的三角形，只需要把右边框和下边框隐藏就行了

代码如下：

    .third{
      width: 0;
      height: 0;
      border-top: 100px solid blue;
      border-left: 100px solid red;
      border-right: 100px solid transparent;
      border-bottom: 100px solid transparent;
    }
     <div class="third"></div>

运行结果：