六边形图片展示

六边形图片展示

 html代码展示

<div class="boxF"><div class="boxS"><div class="boxT" :style="{background:'url('+ $global.picCodePolice(item.faceImg) +')'}"></div></div>
</div>

相关的css展示

.boxF, .boxS, .boxT{width: 250px;height: 300px;overflow: hidden;display: block;margin: 0 auto !important;z-index: 10;position: relative;
}
.boxF, .boxS        {visibility: hidden;
}
.boxF        {transform: rotate(120deg);// float: left;margin-left: 10px;-ms-transform: rotate(120deg);-moz-transform: rotate(120deg);-webkit-transform: rotate(120deg);
}
.boxS        {transform: rotate(-60deg);-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);
}
.boxT        {transform: rotate(-60deg);background-size: 100% auto !important;-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);visibility: visible;
}