scss:
.hexagon {
width: 100px;
height: 55px;
background: red;
margin: 50px auto;
position: relative;
&:before,
&:after {
content: "";
position: absolute;
width: 0;
height: 0;
}
&:before {
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
&:after {
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
}
或者css:
.hexagon {
width: 100px;
height: 55px;
background: red;
margin: 50px auto;
position: relative;
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
width: 0;
height: 0;
}
.hexagon:before {
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
.hexagon:after {
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
html:
<div class="hexagon"></div>
效果: