html怎么做六边形效果图,用css绘制六边形的div

.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;

}