面试题系列一之-css画三角形(原理解析)

news2024/9/20 5:42:42

用html写一个三角形的图标算是一个比较简单的,但是工作中用的还是比较多的，面试也可能会问，但了解背后的原理才能熟练使用

我们首先写一个div,设置边框

<body>
    <div class="border"></div>
</body>
<style>
.border {
    width: 100px;
    height: 100px;
    border: 2px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
    margin: 50px auto;
}
</style>

效果：
在这里插入图片描述
2. 将border设置100px，效果图如下所示：

3. 将宽高设为0，效果图如下所示：

4.如果我们像得到下面的三角形，我们把上面左右隐藏就行，效果如下

<style>
    .border {
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: transparent transparent #ffad60 transparent;
        margin: 50px auto;
    }
</style>

在这里插入图片描述
然后这样会占用矩形的面积，大小不是三角形，完美的做法如下
首先把顶部高度去掉：

 .border {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 100px 100px;
        border-color: #96ceb4 #ffeead #d9534f #ffad60;
        margin: 50px auto;
    }

效果：
在这里插入图片描述
然后把左右隐藏：

 .border {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 100px 100px;
        border-color: transparent transparent #ffad60;
        margin: 50px auto;
    }