clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
.demo {
margin: 15px auto;
width: 400px;
height: 400px;
background: #ffc2c2;
clip-path:;
}
clip-path: url(#cross);
指定一个 svg
作为裁剪。
<svg height="0" width="0">
<defs>
<clipPath id="cross">
<rect y="100" x="100" width="90" height="90"></rect>
<rect x="0" y="100" width="90" height="90"></rect>
<rect x="100" y="0" width="90" height="90"></rect>
<rect x="0" y="0" width="90" height="90"></rect>
</clipPath>
</defs>
</svg>
clip-path: circle(40%);
设定一个圆形的裁剪,内容占据40%空间
正文结束
Ctrl + Enter