前端面试常见问题:如何使用纯CSS画三角形(超详细步骤分解)
- html/css
- 2021-11-01
- 246
在前端面试中,经常会有面试官会问到如何使用css绘制出三角形的形状?使用css画三角形的原理,是利用元素的边框去绘制,主要通过设置border属性去改变边框的宽度和颜色、透明度来达到三角形的视觉效果
下面分解为几个步骤演示如何让一个普通的div盒子一步一步变成三角形。
html代码:
<div class="item"></div>
为了方便这一步的观看,先来给div设置个宽高和背景颜色css代码:
.item { width: 100px; height: 100px; background-color: thistle; }
效果是这样的,这也是最开始的盒子:
现在去掉盒子多余的背景颜色属性,然后我们来给这个盒子加一个一定宽度的边框,并且每个边框都设置不同的颜色,css代码:
.item { width: 100px; height: 100px; border-right: 50px solid yellow; border-top: 50px solid blue; border-bottom: 50px solid red; border-left: 50px solid green; }
为了让效果更明显,边框宽度设置的比较大,效果是这样的:
中间的div没有变,可以看到,四个边框都是同样的宽度,为了平均分配,就像上图那样分布,这样四个边框看上去就是四个梯形,上下两个梯形的上边长度=div的宽度,左右两个梯形的上边长度=div的高度
此时如果把div宽高都设置为0会发生什么变化呢?
css代码:
.item { width: 0; height: 0; background-color: thistle; border-top: 50px solid blue; border-right: 50px solid yellow; border-bottom: 50px solid red; border-left: 50px solid green; }
效果如下:
因为div宽高都为0了,那么梯形的上边长度也跟着变为0,自然就成了三角形,这样一来我们一下就得到了4个三角形,如果我想要下面的红色三角形,那么给其他三个边框加上css中的transparent属性就行了
.item { width: 0; height: 0; border-top: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-left: 50px solid transparent; }
效果如下:
这样就得到了一个用css绘制的三角形,接下来就很简单了,想要哪边的三角形,就将另外三个边框用transparent属性设置为颜色全透明就行了。
拓展:
transparent属性:它代表着全透明黑色,即一个类似rgba(0,0,0,0)这样的值
transparent一般使用场景:
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent
本文由江海于2021-11-01原创发表在江海个人博客,转载须经本站同意。
本文链接:https://www.jianghaiseo.com/post/42.html
发表评论