通过伪元素通过边界创建六边形是不可能实现的.一种替代方案是在六边形内叠加六边形,从而实现相同的期望结果.
这是一个可以实现的example:
HTML – 相当基本,为更多的边框继续相同的模式.
CSS(三层 – 两个内在元素)
从六角形类开始,定义shape / size / colors:
.hex {
margin-top: 70px;
width: 208px;
height: 120px;
background: #6C6;
position: relative;
}
.hex:before, .hex:after {
content:"";
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: absolute;
}
.hex:before {
top: -59px;
border-bottom: 60px solid #6C6;
}
.hex:after {
bottom: -59px;
border-top: 60px solid #6C6;
}
调整内部类,并使用transform: scale()按比例缩小内部元素的尺寸.在这个例子中,使用了一个比例尺(.8,.8).如果你想要更粗的边框,减少数字;相反,如果你想要更薄的边框,增加数字.
指定和覆盖颜色,还增加z-index值以使元素向前.
.hex.inner {
background-color:blue;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:1;
}
.hex.inner:before {
border-bottom: 60px solid blue;
}
.hex.inner:after {
border-top: 60px solid blue;
}
样式第二个嵌套元素,基本上遵循与上次相同的步骤.因为它在一个已经缩放的元素内,所以使用相同的比例值是没有价值的.当然,你可以使用任何你想要的;这只是一个基本的例子.
.hex.inner2 {
background-color:red;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:2;
}
.hex.inner2:before {
border-bottom: 60px solid red;
}
.hex.inner2:after {
border-top: 60px solid red;
}