用css绘制六边形的div
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css绘制六边形-jq22.com</title>
</head>
<body>
<div id="sharpContainer">
<div class="sharp center">
</div>
<div class="sharp top">
</div>
<div class="sharp top-left">
</div>
<div class="sharp top-right">
</div>
<div class="sharp bottom">
</div>
<div class="sharp bottom-left">
</div>
<div class="sharp bottom-right">
</div>
</div>
<script>
</script>
</body>
</html>
.sharp:before {
content:"";/*不需要展现文字等内容,所以设置为空字符 */
width:0px;
border-bottom:80px solid transparent;
border-top:80px solid transparent;
border-right:40px solid orangered;
position:absolute;
left:-40px;
top:0px;
}
.sharp {
min-width:100px;
height:160px;
background:orangered;
display:inline-block;
position:absolute;
line-height:160px;
color:#FFFFFF;
font-size:20px;
text-align:center;
}
.sharp:after {
content:"";/*不需要展现文字等内容,所以设置为空字符*/
width:0px;
border-bottom:80px solid transparent;
border-top:80px solid transparent;
border-left-width:40px;
border-left-style:solid;
border-left-color:orangered;
position:absolute;
right:-40px;
top:0px;
}
#sharpContainer {
width:100%;
height:600px;
}
#sharpContainer .center {
top:200px;
left:300px;
}
#sharpContainer .top {
top:20px;
left:300px;
}
#sharpContainer .top-left {
top:110px;
left:140px;
}
#sharpContainer .top-right {
top:110px;
left:460px;
}
#sharpContainer .bottom {
top:380px;
left:300px;
}
#sharpContainer .bottom-left {
top:290px;
left:140px;
}
#sharpContainer .bottom-right {
top:290px;
left:460px;
}
作者：小屋
链接：http://www.rumenwu.com/operate/1154.html
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏 
微信打赏 
