用 css 畫三角形、梯形、扇形、箭頭和橢圓幾種基本形狀

1. 畫三角形

利用元素的 border 繪製三角形，先來看一下寬高均爲 0，border 有寬度的效果是啥樣的：

<style> .triangle { width: 0; height: 0; border-top: 100px solid #f00; border-right: 100px solid #0f0; border-bottom: 100px solid #00f; border-left: 100px solid #ff0; } </style>

<div class="triangle"></div>
複製代碼

而後咱們能夠經過給任意三邊的顏色設置爲 transparent 便可分別實現任一方向的三角形。

經過設置某條邊的寬度比其它邊寬，來調整三角形的高度。

<style> .triangle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 200px solid #0ff; } </style>
複製代碼

經過設置某條邊的寬度比其它邊窄，來調整三角形的寬度。

<style> .triangle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 200px solid #0ff; } </style>
複製代碼

2. 畫梯形

梯形也是基於 border 來繪製的，只不過繪製梯形時，寬高和border尺寸相同。

<style> .trapezoid { width: 50px; height: 50px; background: #ff0; border-top: 50px solid #f00; border-bottom: 50px solid #00f; border-left: 50px solid #0f0; border-right: 50px solid #0ff; } <div class="trapezoid"></div> </style>
複製代碼

而後與三角形同理，把任意三邊顏色設置爲 transparent便可獲得某一朝向的梯形。

3. 畫扇形

任意角度的有點複雜，暫時先只實現90度的吧。

原理：左上角是圓角，其他三個角都是直角：左上角的值爲寬和高同樣的值，其餘三個角的值不變（等於0）。 border-radius四個值的順序是：左上角，右上角，右下角，左下角。

<style> .sector1 { border-radius:100px 0 0; width: 100px; height: 100px; background: #00f; } <div class="sector1"></div> </style>
複製代碼

原理：和三角形的實現有些相似。

<style> .sector2 { border: 100px solid transparent; width: 0; border-radius: 100px; border-top-color: #f00; } <div class="sector2"></div> </style>
複製代碼

4. 畫箭頭

利用三角繪製箭頭，只須要再繪製一個和此三角大小相同，方向相同的三角，顏色和背景顏色同樣，覆蓋在此三角上面，經過少許的位移造成箭頭。

<style> .arrow{ width: 0; height: 0; border: 50px solid; border-color: transparent #0f0 transparent transparent; position: relative; } .arrow::after{ content: ''; position: absolute; right: -55px; top: -50px; border: 50px solid; border-color: transparent #fff transparent transparent; } <div class="arrow"></div> </style>
複製代碼

5. 橢圓

橢圓依舊依賴 border-radius 屬性，不少人應該都沒注意過，border-radius 其實能夠設置水平半徑和垂直半徑兩個值 ，參考MDN - border-radius,具體用法爲 border-radius: 水平半徑 / 垂直半徑;.

<style> .oval { width: 100px; height: 50px; background: #ff0; border-radius: 50px / 25px; } </style>
<div class="oval"></div>
複製代碼

6. 總結