css做出多边形 |css如何在背景图片往右

CSS做出多边形

在网页设计中，多边形是很常见的图形之一。比如大家想要制作一个六边形的图形，大家可以通过CSS实现。

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

上面的代码是实现六边形的CSS代码，接下来大家简单讲讲这个代码实现了什么。

首先大家设定了div的宽高，然后将position属性设为relative，这是为了后面做伸出来的三角形方便。

接下来大家使用:before和:after选择器来实现三角形。大家将:before选择器放在div上方，并把它的border-bottom设为27.5px（55除以2），这样就形成了一个45度的三角形。

紧接着，大家将:after选择器放在div下方，border-top设为27.5px，这样大家就得到了一个完整的六边形。

那么，如果大家想要制作其他形状的多边形，该怎么办呢？其实方法也是类似的，大家可以使用伸出来的三角形来组成其他的多边形。

最后，多边形可以制作出很多华丽的效果，大家可以将它们用在很多地方，比如按钮、标签、背景等等。