css3制作六边形图片 |html css 固定列 滚动

.hexagon {
width: 100px;
height: 55px;
background: #6C6;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
top: -25px;
border-bottom: 25px solid #6C6;
}
.hexagon:after {
bottom: -25px;
border-top: 25px solid #6C6;
}

首先，大家需要创建一个类名为hexagon的元素。接着设置该元素的宽度和高度，这样它就可以成为一个六边形了。同时，大家可以设定该六边形的背景颜色，这里使用#6C6。

接下来，大家需要使用伪元素:before和:after来制作出六边形的两个三角形。这里大家在位置是相对于hexagon元素的绝对定位。同时，大家使用border属性来制作出三角形的形状。其中，大家使用border-left和border-right来设置三角形的宽度，使用border-top和border-bottom来设置三角形的高度。为了制作六边形的两个三角形，大家分别设置它们的位置为top:-25px和bottom:-25px。

最后，大家使用border-color属性来给六边形的两个三角形设置颜色。

通过以上步骤，大家就可以使用CSS3制作出一个漂亮的六边形图片了！