轉(zhuǎn)自：https://ydmgirls.com/posts/6GzfGe
在這篇文章中咒精，我們會(huì)用三種不同的CSS 方式繪制三角形袍冷，并總結(jié)每種情況的優(yōu)缺點(diǎn)殴蓬。其中之一是比較傳統(tǒng)的使用 border繪制忿墅，另外兩個(gè)是分別使用clip-path 和 liner-gradient()繪制。
使用 border
使用 border 是 CSS 繪制三角形最經(jīng)典的方式也是目前最流行的一個(gè)方案泽艘。它的主要思想是設(shè)置元素的 width 和 height 等于 0缘厢，三角形實(shí)際的寬度和高度取決于border的寬度。
我們拿頂點(diǎn)向上三角形舉例
知道具體思想后沛励，同理可以設(shè)置不同頂點(diǎn)方向的三角形代碼如下
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
利用 border 繪制三角形適用于所有的瀏覽器责语，但是這種繪圖方式并不是 border 屬性專門設(shè)計(jì)的解決方案，所以當(dāng)我們想要在三角形內(nèi)添加內(nèi)容的時(shí)候目派，并不會(huì)出現(xiàn)我們預(yù)期的效果
優(yōu)點(diǎn)：
- 兼容性： 所有的瀏覽器都兼容此方法
- 簡單： 使用簡單坤候，易于理解
缺點(diǎn)：
- 如果在三角形中添加內(nèi)容的話，并不能滿足我們的需求
使用background-image
使用 background-image 屬性繪制三角形企蹭，在這里我們無需引入圖片白筹，使用linear-gradient來完成三角形的繪制。
主要思想
- 添加linear-gradient屬性谅摄，朝著右下角添加在 50%的位置 由透明到紅色的線性漸變
- 添加linear-gradient屬性徒河，朝著右上角添加在 50%的位置 由紅色到透明的線性漸變
- 設(shè)置兩個(gè)漸變區(qū)域的寬度為50%背景寬度
-
將兩個(gè)漸變區(qū)域定位到一左一右
image.png
代碼實(shí)現(xiàn)
<div class="triangle"></div>
.triangle {
width: 300px;
height: 300px;
background-image:
linear-gradient(to bottom right, transparent 50%, red 0),
linear-gradient(to top right, red 50%, transparent 0);
background-size: 50% 100%;
background-repeat: no-repeat;
background-position: left, right;
}
這種方式繪制出的三角形他的容器依然是一個(gè)長方形，所以如果我們在容器內(nèi)添加內(nèi)容的話操作起來不會(huì)有太多的局限性送漠。
優(yōu)點(diǎn)：
- 兼容：瀏覽器兼容性很好
- 響應(yīng)式： 它會(huì)隨著容器的尺寸改變而改變
- 完美添加內(nèi)容：容器的大小不會(huì)因?yàn)楸尘霸O(shè)置的改變而改變顽照，所以添加文本或其它內(nèi)容很簡單
缺點(diǎn)：
- 實(shí)現(xiàn)起來復(fù)雜，不易理解
使用clip-path
代碼實(shí)現(xiàn)
<div class="triangle"></div>
.triangle {
width: 300px;
height: 300px;
background: red linear-gradient(red, blue);
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
使用這種方式要特別注意的是闽寡，裁剪區(qū)以外的部分全部不可視代兵，包括內(nèi)容和像border 、shadow爷狈、outline等的屬性植影。
polygon只是clip-path 眾多屬性中的一個(gè)，你可以用 clip-path 的其他屬性裁剪出任意你想要的圖形淆院。
優(yōu)點(diǎn)：
- 簡單：clip-path 功能強(qiáng)大且用途廣泛何乎，允許任何形狀句惯，而不僅僅是三角形
- 響應(yīng)式： 他會(huì)根據(jù)容器的大小進(jìn)行調(diào)整
- 可定制： 漸變和效果只要在可見區(qū)域內(nèi)就不是問題
缺點(diǎn)：
- 兼容性： 瀏覽器兼容性不是很好
- 容易出錯(cuò)： 裁剪區(qū)以外的所有內(nèi)容都不顯示，可能導(dǎo)致意想不到的結(jié)果
總結(jié)
CSS一直在不斷的迭代更新支救，現(xiàn)在有繪圖屬性 clip-path 和 background-image抢野，這使繪制三角形更加多樣性，而且比border 更加靈活和易于維護(hù)各墨。我們用錘子把釘子釘在墻上而不是用螺絲刀指孤，同樣的，比起死板的 border方式贬堵，使用更適合的方式完成任務(wù)會(huì)更符合我們的預(yù)期恃轩。當(dāng)然，沒有絕對的好與不好黎做，只有適合與不適合叉跛，在使用過程中可以根據(jù)問題情況酌情選擇方案。
對學(xué)習(xí)抱有熱情的開發(fā)小伙伴歡迎加入 qq群685421881蒸殿，更歡迎熱愛編程的妹子進(jìn)入筷厘，讓我們一起學(xué)習(xí) 并進(jìn)步吧
