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

純CSS的話, box-shadow 是做不出來的, 有一個相容性很差的方案是, 使用 filter: drop-shadow.

如果不考慮只CSS, 使用 iconfont 可以給字體加 text-shadow, 但只支援 SVG 的 iconfont 不行.

當然, 你也可以直接切圖.