用css绘制六边形的div

用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
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。