六边形图片展示

六边形图片展示

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