如何用CSS畫三角形


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畫一個三角形的時候,這時候你可以很皮的問一句您想要尖尖朝哪邊的三角形呢?哈哈哈哈哈哈哈哈哈

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM