图片显示为六边形，且加边框

页面
<div class="box1F">
    <div class="box1S">
        <div class="box1T"></div>
    </div>
</div>
<div class="boxF">
    <div class="boxS">
        <div class="boxT"
             [ngStyle]="{'background-image': 'url('+ dataProvider.picUrlHost+ data.DY_PIC_URL + ')'}"></div>
    </div>
</div>

样式

.box1F {
    position: absolute;
    left: -4px;
    top: 1px;
    margin-left: 23px;
}
.box1F, .box1S, .box1T {
    width: 70px;
    height: 87px;
    overflow: hidden;
}
.box1F, .box1S {
    visibility: hidden;
}
.box1F {
    transform: rotate(120deg);
}
.box1S {
    transform: rotate(-60deg);
}
.box1T {
    transform: rotate(-60deg);
    background: no-repeat;
    background-size: 125% auto;
    visibility: visible;
    background: #fcc91a;
}
.boxF {
    margin-left: 13px;
    margin-top: -2px;
    margin-bottom: 5px;
}

.boxF, .boxS, .boxT {
    width: 62px;
    height: 77px;
    overflow: hidden;
}
.boxF, .boxS {
    visibility: hidden;
}
.boxF {
    transform: rotate(120deg);
}
.boxS {
    transform: rotate(-60deg);
}
.boxT {
    transform: rotate(-60deg);
    background: no-repeat;
    background-size: 125% auto;
    background-position-x: center;
    visibility: visible;
}