css制作五边形
1、新建一个html文件。如图：
2、在html文件上创建一个div标签，然后给这个div添加一个id，方便设置五边形的样式。如图：
代码：<div id="pentagon"></div>
3、设置css样式，创建一个三角型。如图：
三角形制作原理：
1.设置div标签的宽、高设置为0；
2.设置div标签边框的宽，这个宽就是三角形的高；
3.设置div标签的背景颜色，然后把其他背景颜色设置为透明。
样式代码：
<style type="text/css">
#pentagon {
margin:100px auto;
position: relative;
height: 0;
width: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 100px solid red;
}
</style>
4、保存html文件后使用浏览器打开，即可看到三角形效果。如图：
5、使用伪类:after为div设置一个梯形。如图：
梯形设置原理：
1.为div设置一个宽度；
2.设置边框的宽度；
3.给一条边框设置颜色，其他边框都是透明；
代码：
#pentagon:before {
content: "";
position: absolute;
top: 100px;
left: -120px;
width: 140px;
border-width: 120px 50px 0 50px;
border-style: solid;
border-color: red transparent transparent transparent;
}
6、保存好html文件后，使用浏览器打开即可看到效果。如图：
7、所有代码。如有不明白可以把所有代码直接复制到html文件，保存后运行即可看到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五边形</title>
<style type="text/css">
#pentagon {
margin:100px auto;
position: relative;
height: 0;
width: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 100px solid red;
}
#pentagon:before {
content: "";
position: absolute;
top: 100px;
left: -120px;
width: 140px;
border-width: 120px 50px 0 50px;
border-style: solid;
border-color: red transparent transparent transparent;
}
</style>
</head>
<body>
<div id="pentagon"></div>
</body>
</html>