CSS 实现五角星和六角星

使用 CSS 创造几何形状，如五角星和六角星，是一种有趣且具有挑战性的任务。以下是如何使用纯 CSS 制作五角星和六角星的方法。

CSS 五角星

五角星可以通过创建一个正方形元素，然后使用 clip-path 属性来裁剪成星形。

<div class="pentagon-star"></div>

.pentagon-star {
    width: 100px;
    height: 100px;
    background-color: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

CSS 六角星

六角星可以通过组合两个相互嵌套的三角形来创建。

<div class="hexagon-star">
    <div class="triangle"></div>
    <div class="triangle"></div>
</div>

.hexagon-star {
    position: relative;
    width: 100px;
    height: 57.74px; /* 等于宽度的 sin(60度) */
    background-color: transparent;
    margin: 28.87px 0; /* 等于高度的一半 */
}

.hexagon-star .triangle {
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon-star .triangle:first-child {
    bottom: 100%;
    border-bottom: 28.87px solid gold;
}

.hexagon-star .triangle:last-child {
    top: 100%;
    border-top: 28.87px solid gold;
}

注意事项

• clip-path 属性在一些老版本浏览器上可能不支持。可以使用在线工具来生成复杂的 clip-path 形状。
• 创建六角星时，重叠的两个三角形的大小和位置需要精确计算，以确保它们正确地组合成星形。
• 以上示例中的尺寸和颜色可以根据需要进行调整。

通过这些方法，你可以使用纯 CSS 创造吸引人的五角星和六角星形状，为网页添加有趣的视觉元素。