CSS属性之clip-path

clip-path

clip-path - CSS：层叠样式表 | MDN (mozilla.org)

clip-path CSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

利用这一特征自然就可以做出很多花里胡哨的效果

取值

主要介绍basic-shape形状的取值

inset：定义一个矩形

用法

• clip-path: inset(30px);：表示距离上右下左都是30px的位置裁剪。
• clip-path: inset(10% 20% 30% 40%);：表示距离上右下左分别是10% 20% 30% 40%的位置裁剪。
• clip-path: inset(20% 10% round 20px);：表示距离上下为20% 左右为10% 的位置裁剪，并且裁剪的圆角弧度都是20px。
• clip-path: inset(20% 10% round 10px 20px 30px 40px);：表示距离上下为20% 左右为10% 的位置裁剪，并且裁剪弧度为左上10px、右上20px、 左下30px、 右下40px。

circle：定义一个圆形

用法

• clip-path: circle(100px);：裁剪半径为100px的圆，默认圆心在中心点，即center center。

• clip-path: circle(100px at top center);：设置圆心在上方中心。

• clip-path: circle(100px at 40px 30px);：可以设置为具体数值。
• clip-path: circle(farthest-side);：使用从形状中心到引用框最远边的长度作为半径。

• clip-path: circle(closest-side);：使用从形状中心到引用框最近一侧的长度作为半径。

ellipse：定义一个椭圆

用法

• clip-path: ellipse(50% 80px);：数值椭圆半径，50%为横向半径、80px为纵向半径。

• clip-path: ellipse(50% 80px at top center);：数值中心点为上边中间点。

• clip-path: ellipse(closest-side closest-side at 100px 40px);：closest-side closest-side为对应两个半径的值，效果和circle一样。

• clip-path: ellipse(closest-side farthest-side at 100px 40px);

polygon：定义一个多边形

用法

• clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% )：定义一组顶点，裁剪区域为这些顶点连线区域。两个值组成一个顶点，相对于元素左上角。

• clip-path: polygon( 0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80% );