有边框正方形代码html,html – 具有边框/轮廓的六边形

通过伪元素通过边界创建六边形是不可能实现的.一种替代方案是在六边形内叠加六边形,从而实现相同的期望结果.

这是一个可以实现的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);

z-index:2;

}

.hex.inner2:before {

border-bottom: 60px solid red;

}

.hex.inner2:after {

border-top: 60px solid red;

}