1.前言
在博主某次前端面試過程中,被問到如何用css畫一個三角形?相信很多朋友在面試中也被問到過這個問題,並且網上針對這個問題也有非常多的解決方案,大部分都是采用border來實現,經過我一番搜索,發現講具體實現的代碼的很多,但是講實現原理的幾乎沒有(也可能是我沒有找到),下面,我就談談利用border畫三角形其內部的原理。
2.原理
2.1 第一步
首先,先來一個div,然后給這個div加一層border,並且給上下左右border分別加上不同顏色,以便觀察,代碼和效果如下:
.trangle{ width: 100px; height: 100px; border: 100px solid #000; border-top-color: red; border-bottom-color: yellow; border-left-color: blue; border-right-color: green; } <div class="trangle"></div>
2.2 第二步
接着,將這個div的width變為0,我們再來看看效果。可以看到,由於div的寬度變成了0,左右兩邊的border“吸”在了一起,同時上下的border變成了三角形,好像快要完成了,別急,再看看第三步。
.trangle{ width: 0px; height: 100px; border: 100px solid #000; border-top-color: red; border-bottom-color: yellow; border-left-color: blue; border-right-color: green; } <div class="trangle"></div>
2.3 第三步
然后,再將這個div的height變為0,效果如下。我們可以看到,由於div的高度也變成了0,上下兩個border也“吸”在了一起,同時上下的border也變成了三角形,到現在為止,四個三角形已經出來了
.trangle{ width: 0px; height: 0px; border: 100px solid #000; border-top-color: red; border-bottom-color: yellow; border-left-color: blue; border-right-color: green; } <div class="trangle"></div>
2.4 第四步
最后,就看你想要哪個角啦,想要哪個角就把其余三個border設為透明即可。例如,我想要最上面的三角形,那就把下、左、右設為透明,代碼和效果如下:
.trangle{ width: 0px; height: 0px; border: 100px solid #000; border-top-color: red; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; } <div class="trangle"></div>
2.5 簡化代碼
其實,我們不需要把四個border都設置一遍,只需設置你想要畫的三角形所涉及到的三條邊的border即可。以上步的畫最上面的三角形為例,只需設置上、左、右三條邊即可,並且要上三角形,就把左右border設為透明,代碼和效果如下:
.trangle{ width: 0px; height: 0px; border-top: 100px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; } <div class="trangle"></div>
3.總結
至此,以上就是畫三角形的具體步驟和實現原理,再當面試官問你如何使用css畫一個三角形的時候,這時候你可以很皮的問一句您想要尖尖朝哪邊的三角形呢?哈哈哈哈哈哈哈哈哈