隨着技術的發展，css也越發強大，css可以制作很多有趣的圖形，讓我們一起來看一下如何使用css制作一個八邊形吧。
方法/步驟
-
1新建一個html文件。如圖：
-
在html文件上創建一個div標簽，然后給這個標簽添加一個id，后面的樣式設置就是對這個id進行設置。
代碼： <div id="octagon"></div>
-
設置id樣式，創建一個矩形。id的樣式主要有寬、高、背景色及矩形的位置。如圖：
代碼：
<style type="text/css" >
#octagon{
width: 250px;
height: 120px;
margin: 150px auto;
position: relative;
}
</style>
-
保存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文件，保存好后運行即可看到效果。
所有代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>八邊形</title>
<style type="text/css" >
#octagon{
width: 250px;
height: 120px;
margin: 150px auto;
position: relative;
}
#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{
content: "";
position: absolute;
top:120px;
width: 100px;
border-color:red transparent transparent transparent;
border-width: 75px 75px 0 75px ;
border-style: solid;
}
</style>
</head>
<body>
<div id="octagon"></div>
</body>
</html>
文章來源：百度