面試官：CSS 如何畫一個三角形？原理是什麼？

一、前言

在前端開發的時候，我們有時候會需要用到一個三角形的形狀，比如地址選擇或者播放器裏面播放按鈕

通常情況下，我們會使用圖片或者svg去完成三角形效果圖，但如果單純使用css如何完成一個三角形呢？

實現過程似乎也並不困難，通過邊框就可完成

二、實現過程

在以前也講過盒子模型，默認情況下是一個矩形，實現也很簡單

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

效果如下圖所示：

將border設置50px，效果圖如下所示：

白色區域則爲width、height，這時候只需要你將白色區域部分寬高逐漸變小，最終變爲 0，則變成如下圖所示：

這時候就已經能夠看到 4 個不同顏色的三角形，如果需要下方三角形，只需要將上、左、右邊框設置爲透明就可以得到下方的紅色三角形

但這種方式，雖然視覺上是實現了三角形，但實際上，隱藏的部分任然佔據部分高度，需要將上方的寬度去掉

最終實現代碼如下：

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

如果想要實現一個只有邊框是空心的三角形，由於這裏不能再使用border屬性，所以最直接的方法是利用僞類新建一個小一點的三角形定位上去

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.border:after{
    content: '';
    border-style:solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 0;
    left: 0;
}

效果圖如下所示：

i

僞類元素定位參照對象的內容區域寬高都爲 0，則內容區域即可以理解成中心一點，所以僞元素相對中心這點定位

將元素定位進行微調以及改變顏色，就能夠完成下方效果圖：

最終代碼如下：

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 6px;
    left: -40px;
}

三、原理分析

可以看到，邊框是實現三角形的部分，邊框實際上並不是一個直線，如果我們將四條邊設置不同的顏色，將邊框逐漸放大，可以得到每條邊框都是一個梯形

當分別取消邊框的時候，發現下面幾種情況：

通過上圖的變化規則，利用旋轉、隱藏，以及設置內容寬高等屬性，就能夠實現其他類型的三角形

如設置直角三角形，如上圖倒數第三行實現過程，我們就能知道整個實現原理

實現代碼如下：

.box {
    /* 內部大小 */
    width: 0px;
    height: 0px;
    /* 邊框大小 只設置兩條邊*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其他設置 */
    margin: 50px;
}

參考文獻

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/KtKFnuRtK-PDESrVeGclEw

猜你喜歡