裁剪图片

1.

 

 

 

clip-path: polygon(0 0 , 100% 0,100% 90%, 55% 90%,50% 100%, 45% 90%,0 90% );

 -webkit-clip-path: polygon(0 0 , 100% 0,100% 90%, 55% 90%,50% 100%, 45% 90%,0 90% );

 

 

2、正六边形

 

:root{
    --height-zlbx:300px ;
}
.hexagon{
        width:calc(1.73205080 * var(--height-zlbx) / 2);
        height:var(--height-zlbx) ;
        -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
        background-color: #333;
        margin: 0 auto;
}

<div class="hexagon"></div>