我知道可以使用以下代码创建六边形形状：
.hex:before {
content: " ";
width: 0; height: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
position: absolute;
top: -30px;
}
.hex {
margin-top: 30px;
width: 104px;
height: 60px;
background-color: #6C6;
position: relative;
}
.hex:after {
content: "";
width: 0;
position: absolute;
bottom: -30px;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
我如何创建一个填充一种颜色的六边形,并用另一种颜色勾勒出来？我试图解决它,但似乎不可能.
欢迎任何其他选择,我想避免使用图像.
解决方法
通过伪元素通过边界创建六边形是不可能实现的.一种替代方案是在六边形内叠加六边形,从而实现相同的期望结果.
这是一个可以实现的example：
HTML – 相当基本,为更多的边框继续相同的模式.
<div class="hex">
<div class="hex inner">
<div class="hex inner2"></div>
</div>
</div>
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);
z-index:2;
}
.hex.inner2:before {
border-bottom: 60px solid red;
}
.hex.inner2:after {
border-top: 60px solid red;
}
