css實現(xiàn)多邊形的方法：首先創(chuàng)建一個HTML示例文件；然后通過transform的skew屬性實現(xiàn)平行四邊形；接著用before偽元素實現(xiàn)三角形；最后結(jié)合平行四邊行和三角形實現(xiàn)多邊形即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦

css怎么實現(xiàn)多邊形？

CSS | 實現(xiàn)有趣的多邊形

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

效果圖

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

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

簡單的width，height

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

transform: skew(-10deg);

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

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

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

利用width:0;height: 0

代碼如下：

三角形代碼

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

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

推薦學習：《css視頻教程》