CSS | 纯css画三角形的思路解析

这是我参与更文挑战的第3天，活动详情查看 更文挑战

在之前的文章【CSS | 4句CSS送你一个小月牙】中，汇总了很多经常用到的css形状，本篇文章主要是分析一下三角形系列的实现思路。

三角形的实现

我们当前以等腰三角形为例，来看看是这怎么实现的。

主要利用的核心属性就是border

第一步

🍇首先：画一个加边框的普通正方形，是这样的：

<div class="div"></div>
.div {
    width: 100px;
    height: 100px;
    border: 1px solid #66CCFF;
 }

第二步

🍈如果把border的数值调大

.div {
    width: 100px;
    height: 100px;
    border: 50px solid #66CCFF;
 }

第三步

🍉把border的颜色设为不一样的

.div{
    width: 100px;
    height: 100px;
    border: 50px solid transparent;
    border-color: #66CCFF #FF9966 #66FFCC  #66FFFF;
}

第四步

🍊如果把div的宽高都设为0

.div{
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-color: #66CCFF #FF9966 #66FFCC  #66FFFF;
}

可以看到，我们现在已经得到四个三角形了，现在要做的就是把三角形抠出来。

第五步

🍋具体做法：想要哪个三角形，就保留哪个三角形的颜色，其他的都设置为透明，因为我们现在想画的是等腰三角形，所以我们把第三个的颜色保留;

.div{
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-color: transparent transparent #66FFCC  transparent;
}

这样看上去，三角形是不是就出来了？

但是如果给三角形加一个背景，会发现div的占位空间并没有改变。

.div{
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-color: transparent transparent #66FFCC  transparent;
    background: #000;
}

第六步

🍍所以接下来我们需要处理一下占位的问题；

🥭思路：把想要三角形的对边的border宽度去掉；

.div{
    width: 0px;
    height: 0px;
    border-bottom: 50px solid  #66FFCC;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
 }

最后完美的三角形就画出来啦！

总结

其实其他三角形的实现方法也都差不多。当底边和水平线平行时，可以直接通过控制宽高比来实现想要的三角形效果；当底边与水平线不重合时，可以利用宽高比和CSS3中的transform属性和rotate相结合，来实现我们想要呈现的三角形效果。

---

小可爱看完就点个赞再走吧！🤞🤞🤞