今天学习了使用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);`
}
}
}