html如何给六边形加上边框,html5 - css写的六边形怎么加边框阴影

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

黄舟2017-04-17 13:58:27 0 1 378

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

.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;

}

回答



1

0

分享

全部回复 (1)

大家讲道理2017-04-17 14:00:271楼

纯CSS的话, box-shadow 是做不出来的, 有一个兼容性很差的方案是, 使用 filter: drop-shadow.

如果不考虑只CSS, 使用 iconfont 可以给字体加 text-shadow, 但只支持 SVG 的 iconfont 不行.

当然, 你也可以直接切图.

回复