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

京东的效果

自己实现的效果

html代码：

样式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);

}