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

·  阅读 1298
CSS |  纯css画三角形的思路解析

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

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

三角形的实现

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

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

第一步

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

image.png

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

第二步

🍈如果把border的数值调大

image.png

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

第三步

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

image.png

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

第四步

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

image.png

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

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

第五步

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

image.png

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

这样看上去,三角形是不是就出来了?

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

image.png

.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;
 }
复制代码

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

image.png

总结

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


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

分类:
前端
标签: