“曾經(jīng)有一個(gè)多邊形擺在我面前，我不懂實(shí)現(xiàn)橄浓，等我查詢(xún)探索時(shí)粒梦，才發(fā)現(xiàn)它的巧妙非常，css的靈活不絕于此荸实。如果上天能夠給它一個(gè)說(shuō)話(huà)的機(jī)會(huì)匀们，它告訴世界：無(wú)敵，是多么准给，多么寂寞泄朴！如果非要給這個(gè)無(wú)敵加上個(gè)期限，那就是：無(wú)極限露氮！”
——題記祖灰，改編源自《仙履奇緣》
正文
前端開(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è)矩形：
那矩形怎么變成平行四邊形呢戴已？就拿一個(gè)鐵絲做的矩形舉例，怎么變成平行四邊形锅减？有人回答：很簡(jiǎn)單啊糖儡，扭曲一下不就好了。對(duì)了怔匣，就是扭曲握联，transform的skew屬性。
誒每瞒，這時(shí)有人問(wèn)了金闽，沒(méi)有斜向上呀？怎么破剿骨，別急代芜，看：
好了，差不多了吧浓利，可是還有個(gè)三角形呢挤庇，來(lái)，上圖：
代碼如下：
為什么要用before偽元素呢荞膘？你懂得罚随，方便布局，這里很巧妙的運(yùn)用了width和height均為0羽资，利用border的顏色和位置進(jìn)行設(shè)置淘菩，包括平時(shí)看到的大部分多邊形，差不多都是這個(gè)原理屠升。最終代碼如下：
作為css探索者潮改，試試設(shè)置不同的border，結(jié)合transform腹暖，看看有何巧妙的效果汇在，五角星，八邊形……手到擒來(lái)脏答，向多邊形的世界出擊吧糕殉。
