css 裁剪路径 clip-path

62 阅读1分钟
.clip{clip-path: ellipse(90vw 2.8rem at 50% 0);}

image.png

  • 使用:
    • 语法:clip-path: polygon(x1 y1, x2 y2, ...)
使用:

/* 三角形 */  {  clippath: polygon(50% 0%, 100% 100%, 0% 100%);background-color: #000; }

/* 菱形 */ {  clippath: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); backgroundcolor: #000; } 

/* 五角形 */{clippath: polygon(50% 0,65% 40%, 100% 40%,  72% 60%, 85% 100%,50% 75%, 15% 100%,   28% 60%, 0 40%, 35% 40%); }