当前位置:首页 > html/css > 正文

前端面试常见问题:如何使用纯CSS画三角形(超详细步骤分解)

  在前端面试中,经常会有面试官会问到如何使用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;
}

  效果如下:

宽高设置为0后

  因为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

发表评论

取消
扫码支持 支付码