[分享]css做透明六边形

CSS做透明六边形是一种常见的美化网页的方法，下面我们就来学习一下如何使用CSS来实现透明六边形。

 .hexagon {
        width: 100px;
        height: 55px;
        background-color: transparent;
        position: relative;
    }
    .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: 30px solid rgba(255, 255, 255, 0.5);
    }
    .hexagon:after {
        top: 100%;
        width: 0;
        border-top: 30px solid rgba(255, 255, 255, 0.5);
    } 

上面的CSS代码实现了一个透明六边形的样式，首先定义了一个宽为100像素、高为55像素的div容器，并设置了背景颜色为透明，以及absolute定位的位置属性。

接下来，我们定义了伪元素:before和:after，其作用是在div容器上下各绘制一个三角形。

在伪元素:before中，我们设置了bottom属性为100%即下方，再用border-bottom绘制了一个30像素高的白色三角形，并设置了透明度为0.5。

相似的，在伪元素:after中，我们设置了top属性为100%即上方，在用border-top绘制了另一个和上方三角形相同的三角形，同样透明度为0.5，并将宽度设为0，以使其不占据空间。

这样，我们就成功的实现了一个透明的六边形效果！