隨著技術的發展，css也越發強大，css可以製作很多有趣的圖形，讓我們一起來看一下如何使用css製作一個八邊形吧。
方法/步驟
1新建一個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;
}
儲存html檔案後使用瀏覽器檢視，即可看到一個六邊形效果。如圖：
回到html程式碼頁面，使用偽類after給這個矩形再新增一個梯形，使用絕對定位調整好梯形的位置。如圖：
儲存html檔案使用瀏覽器開啟，即可看到一個八邊形效果。如圖：
所有程式碼。可以直接複製所有程式碼到html檔案，儲存好後執行即可看到效果。
所有程式碼: