Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css绘制六边形

0