css太強大了，你知道存css也能製作八邊形嗎？讓我們一起來看一下css如何畫出一個八邊形吧。
思路： 八邊形 = 梯形 + 矩形 +梯形。
方法/步驟
新建一個html檔案。如圖：
在html檔案上建立一個div標籤，然後給這個標籤新增一個id，後面的樣式設定就是對這個id進行設定。
程式碼：
設定id樣式，建立一個矩形。id的樣式主要有寬、高、背景色及矩形的位置。如圖：
程式碼：
儲存html程式碼後使用瀏覽器檢視，即可看到矩形效果。如圖：
使用偽類before建立一個梯形，然後使用絕對定位把這個梯形放在矩形的上面。。如圖：
樣式程式碼：
#octagon:before{
content: "";
position: absolute;
top:-75px;
width: 100px;
border-color:transparent transparent red transparent;
border-width:0 75px 75px 75px ;
border-style: solid;
}
#octagon:after
儲存html檔案後使用瀏覽器檢視，即可看到一個六邊形效果。如圖：
回到html程式碼頁面，使用偽類after給這個矩形再新增一個梯形，使用絕對定位調整好梯形的位置。如圖：
儲存html檔案使用瀏覽器開啟，即可看到一個八邊形效果。如圖：
所有程式碼。可以直接複製所有程式碼到html檔案，儲存好後執行即可看到效果。
所有程式碼: