[分享]css六边形加阴影

CSS六边形加阴影

.hexagon {
    width: 100px;
    height: 55px;
    background: #ccc;
    position: relative;
}
.hexagon::before, .hexagon::after {
    content: ';
    position: absolute;
    top: -25px; left: 0;
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
.hexagon::before {
    border-bottom: 25px solid #ccc;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
.hexagon::after {
    border-top: 25px solid #ccc;
    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.5);
} 

以上代码实现了一个六边形，并增加了阴影效果。具体解释如下：

首先，为了创建一个六边形，我们需要设置该元素的宽度和高度，如下所示：

.hexagon {
    width: 100px;
    height: 55px;
    background: #ccc;
    position: relative;
} 

这里的宽度和高度的设置应该与我们需要创建的六边形尺寸相匹配。我们还为该元素设置了相对位置。

接下来，我们使用伪元素:before和:after来创建六边形的两个侧面，如下所示：

.hexagon::before, .hexagon::after {
    content: ';
    position: absolute;
    top: -25px; left: 0;
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
} 

伪元素的创建遵循标准的语法，我们在这里使用了两个伪元素来创建六边形的两侧。这里设置了这些元素的绝对位置（上方偏移25像素，左侧对齐），并使用border-left和border-right属性来创建三角形。注意，我们将这些属性的宽度设置为0，而是使用它们的颜色和边框宽度来创建三角形。

接下来，我们需要为六边形的两个侧面分别设置顶部和底部的颜色，如下所示：

.hexagon::before {
    border-bottom: 25px solid #ccc; 
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}
.hexagon::after {
    border-top: 25px solid #ccc;
    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.5);
} 

这里，我们对第一个伪元素使用了border-bottom属性，将其颜色设置为与六边形背景色（#ccc）相同的灰色。对于第二个伪元素，我们使用了border-top属性来设置相同的颜色。在这两个伪元素上还设置了box-shadow属性来创建阴影效果，这可以将元素立即提升到一个更高的层次。

因此，通过使用合适的CSS属性和伪元素，我们可以轻松地创建六边形元素，并增加阴影效果。