css生成各類圖形詳解

css面試題之生成各類常見圖形

最近一直在看面試題，發現了一些有趣的東西，有不少東西之前不是很懂，都停留在使用的層次上，因此如今開始惡補基礎。恰好了看到了一個面試題，感受之前沒有對這個知識點了解的深刻，所以如今作個筆記，防止本身忘記。若是你是一名前端開發人員，那麼你必定熟悉css吧！那你試一下用純css實現一個三角形、五角星、平行四邊形？用css生成的各類圖形基本上都依賴於border、border-radius屬性。這裏不記錄具體怎麼用css實現一個圖形，只說明如何利用這兩個屬性，固然除了這兩個屬性以外，複雜的圖形還須要用before、after這兩個強大的僞類。

在解釋如何用border生成圖形以前先來增強一個認識，先聲明一個div，而後設置border效果以下：

爲何border是梯形呢？詳解以下圖：

border的上邊寬由content寬度決定（就是圖片的內容width）下邊框等於content寬度+左右兩邊border寬度，高度等於咱們設置的border大小，並且邊框相接的地方是各自一半；所以要用css造成一個三角形就很簡單了，三角形只有三邊，那麼就設置內容width等於0，這樣就達到了三邊的目的了。可是寬度呢？因爲border下邊寬的高度由三部分組成：內容寬度、左、右border寬度。所以寬度能夠經過設置border-left、border-right來完成，高度就直接設置border大小就能夠了。造成過程以下圖：

根據該推理得出的代碼以下，能夠將一下代碼在本身本地編輯器進行驗證：

.tranigle {
  height: 0;
  width: 0;
  border-bottom: 100px solid yellowgreen;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
複製代碼

這只是其中的一種，根據上面的原理，還能夠實現直角三角形（border-left和border-right設置一個就行）、等腰直角三角形等等。

理解了上面的實現原理幾乎就能夠實現不少圖像了，好比橢圓（利用border-radius能夠設置兩個半徑）、五角星（使用一個三角形加上before、after拼接成另三個角）、六角形（兩個三角形）、八角形（兩個四邊形，旋轉必定角度transform: rotate(45deg)）、十二角形（三個四邊形，旋轉必定角度）、吃豆人（就是一個圓，隱藏右邊的90度）、平行四邊形（矩形，變形skew）等等。這裏有一篇文章實現了大部分圖形45個值得收藏的 CSS 形狀。