html5 - css写的六边形怎么加边框阴影

Question

怎么给上下两个三角形加上边框阴影？

<p class="hexagon">
                <p class="top"></p>
                <p class="bottom"></p>
            </p>`
<style type="text/css">
.hexagon{
            position: relative;
            display:inline-block;
            margin-right: 20px;
            width: 200px;
            height: 120px;
            background-color: #fff;
            -moz-box-shadow: 0 0 20px #ddd;
            -webkit-box-shadow:0 0 20px #ddd;
            box-shadow: 0 0 20px #ddd;
            text-align: center;}
.hexagon .top{
    width: 0;height: 0;
    position:absolute;
    left:0;
    top:-60px;
    border-bottom:60px solid #fff;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
}
.hexagon .bottom{
    width: 0;height: 0;
    position:absolute;
    bottom:-60px;
    border-top:60px solid #fff;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
}
.hexagon .img{
    width: 200px;height: 120px;
display: table-cell;
     vertical-align:middle;
     text-align:center;
     *display: block;
     *font-size: 120*0.873;
     *font-family:Arial;
}
</style>

Answer 1

With pure CSS, box-shadow cannot be created. There is a solution with poor compatibility, which is to use filter: drop-shadow.

If you don’t consider only CSS, you can use iconfont to add text-shadow to the font, but iconfont that only supports SVG cannot.

Of course, you can also cut the picture directly.