css實現(xiàn)多邊形的方法

這篇文章主要介紹“css實現(xiàn)多邊形的方法”，在日常操作中，相信很多人在css實現(xiàn)多邊形的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css實現(xiàn)多邊形的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

css實現(xiàn)多邊形的方法：首先創(chuàng)建一個HTML示例文件；然后通過transform的skew屬性實現(xiàn)平行四邊形；接著用before偽元素實現(xiàn)三角形；最后結合平行四邊行和三角形實現(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如何打磨。

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

簡單的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實現(xiàn)多邊形的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>