用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
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏
微信打赏
相关推荐
-
为什么div css网页在Firefox浏览器中不能水平居中
为什么div css网页在FF浏览器中不能水平居中呢?为什么在其它浏览器中网页居中，在火狐浏览器FF中网页不能布局居中解决方法。 FF下面设置容器的左右外补丁为auto就可以了。 在DIVCSS5网站中介绍过很多次网页布局居中的条件，也是为了最大限度兼容各大浏览器。 条件一：对body加 text-align:center内容居中; 条件二：对需要居中的最外…
-
你是不是忽视了这个老牌高权重流量平台？
没有哪个平台能比得上百度给予自身产品的高权重。 看以下这组数据，敢问有多少网站的流量能与「百度知道」相提并论？ 看以下这组数据，敢问有多少网站的流量能与「百度知道」相提并论？ 尽管大家都清楚，利用「百度知道」这块风水宝地引流，对于精准营销能起到绝佳效果。 但许多人却因为这块流量之地需养号及挖掘工作投入精力较大，望而止步。 01、百度知道有哪些推…
-
如何利用私域流量促进产品成交？
这篇文章从私域流量出发，围绕如何搭建私域流量池，朋友圈种草以及快闪群成交，分析了。推荐给对这方面有兴趣的小伙伴们。 一、搭建私域流量池 掌握一个思维——低成本吸引精准客户。 给大家介绍私域流量营销导图，在经营客户的时候，我们必须要有个渠道，如果门店开在商场，商场就是我们的公域流量或者说是渠道，比如我们线上的淘宝、微博、抖音等自媒体平台，只是大家没发现这个流量…
