clip-path与伪元素结合绘制带边框的六边形

京东的效果

自己实现的效果

html代码：

<div class="ts"></div>

样式less代码：

.genpolygon(@outwid, @inwid) {

    width: @outwid * 0.9;

    height: @outwid;

    background-color: rgb(224,17,33);

    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);

    position: relative;

    &::before {

        content: "帅";

        position: absolute;

        top: (@outwid - @inwid) / 2;

        left: (@outwid - @inwid) / 2;

        width: @inwid * 0.9;

        height: @inwid ;

        background-color: #fff;

        clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);

        color: rgb(224,17,33);

        font-size: 3.4em;

        display: flex;

        align-items: center;

        justify-content: center;

    }

}

.ts {

    .genpolygon(100px, 90px);

}