2022-02-11 学习记录：通过CSS3的clip-path实现多边形

今天学习了使用CSS实现多边形，感觉很有意思也很使用的一个属性
项目中遇到了需要画梯形，如果使用切图的话，对于不同分辨率下兼容性可能不太好实现，所以还是得靠前端强大的功能来实现！
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
polygon可以定义多边形，需要写入每个顶点的坐标位置(具体数值或者百分比都可以)
下边写一个画出五角星的例子

 .try-empty {
        position: absolute;
        width: 100%;
        height: 100%;

        .try-kkk {
        	width: 100 * $remh;
            height: 100 * $remh;
            display: inline-block;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            background-color: red;
            clip-path: polygon(0 40 * $remh, 40 * $remh 40 * $remh, 50 * $remh 0, 60 * $remh 40 * $remh, 100 * $remh 40 * $remh, 70 * $remh 60* $remh, 80 * $remh 100 * $remh, 50* $remh 70 * $remh, 20 * $remh 100 * $remh, 30 * $remh 60 * $remh);
        }
    }

效果如下：

兼容分辨率还可以灵活写如下，以梯形为例：

html及css如下：

<span :class="['index-bg', patchPosition]" :style="getPatchStyle(item)"></span>
    .index-bg {
            height: 4 * $remh;
            display: inline-block;
            position: absolute;
            left: 50%;
             bottom: 0;
             transform: translateX(-50%);
        }

梯形使用getPatchStyle来定义，可以兼容不同宽度等

import { mapGetters } from 'vuex'
computed: {
...mapGetters(['heightRatio']),
      //小块样式
        getPatchStyle() {
            return item => {
                const pW = 4 * this.heightRatio
                const w = this.patchWidth * this.heightRatio
                return `width:${w}px;background-color:${item.bgColor};clip-path:polygon(${pW}px 0,${w - pW}px 0,${w}px ${pW}px,0 ${pW}px);`
            }
        }
}