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

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

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

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

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

效果圖

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

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

簡(jiǎn)單的width，height

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

transform: skew(-10deg);

誒，這時(shí)有人問(wèn)了，沒(méi)有斜向上呀？怎么破，別急，看：

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

好了，差不多了吧，可是還有個(gè)三角形呢，來(lái)，上圖：

利用width:0;height: 0

代碼如下：

三角形代碼

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

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

推薦學(xué)習(xí)：《css視頻教程》