css怎麼實現多邊形

css實作多邊形的方法：先建立一個HTML範例檔；然後透過transform的skew屬性實作平行四邊形；接著用before偽元素實作三角形；最後結合平行四邊行和三角形實作多邊形即可。

本文操作環境：windows7系統、HTML5&&CSS3版，DELL G3電腦

css怎麼實作多邊形？

CSS | 實現有趣的多邊形

前端開發路漫漫，在行走web世界的路途中，我們肯定有遇到多邊形的設計，最簡單的方法莫過於直接上圖片走起，作為一個有「追求」的前端，當然是要「自虐」了……今天我們就來說說前端程式設計怎麼實現多邊形，先上一張圖，乃們可以先想想怎麼實現。

效果圖

“咋實現咋實現”，“有文字斜體向上麼”，“word天，還是直接給我img吧，感覺好麻煩」。放輕鬆，深呼吸，跟著我，一起看css如何打磨。

這個類似標籤的多邊形，我們可以看成平行四邊行和立三角形的結合，先上一個矩形：

簡單的width，height

那矩形怎麼變成平行四邊形呢？就拿一個鐵絲做的長方形舉例，怎麼變成平行四邊形？有人回答：很簡單啊，扭曲一下不就好了。對了，就是扭曲，transform的skew屬性。

transform: skew(-10deg);

誒，這時有人問了，沒有斜向上呀？怎麼破，別急，看：

transform: skew(-10deg) rotate(-8deg)

好了，差不多了吧，可是還有個三角形呢，來，上圖：

利用width:0;height: 0

程式碼如下：

##三角形程式碼

為什麼要用before偽元素呢？你懂得，方便佈局，這裡很巧妙的運用了width和height均為0，利用border的顏色和位置進行設置，包括平時看到的大部分多邊形，差不多都是這個原理。最終程式碼如下：

作為css探索者，試試看設定不同的border，結合transform，看看有何巧妙的效果，五角星，八邊形…手到擒來，向多邊形的世界出擊吧。

推薦學習：《

css影片教學》

以上是css怎麼實現多邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章！