clip-path: ellipse 属性如何工作？

【问题标题】：How does the clip-path: ellipse property work?clip-path: ellipse 属性如何工作？
【发布时间】：2020-09-18 04:41:35
【问题描述】：

在本文档中：

使用的clip-path属性类似

clip-path: ellipse(150px 160px at 100px 200px)

确实可以在 div 的底部切割一个椭圆，但我想在 div 的顶部切割一个椭圆。我怎样才能做到这一点？如果我想切割一个凹椭圆而不是一个凸椭圆呢？

【问题讨论】：

【解决方案1】：

简而言之：位置从形状的中间设置

值可以如下所示：

clip-path: ellipse(width height at left top )

如果您设置一个形状at 0 0，您将只能看到它的底部和右侧的一夸脱从形状的中心。

html {
  background:white;
}
body {
  background:black;
  height:100vh;
  clip-path: ellipse(150px 160px at 0 0);
}

使用 vh/vw 值，您可以做类似的事情：

html {
  background:white;
}
body {
  background:black;
  height:100vh;
  clip-path: ellipse(25vw 25vh at 50vw 50vh );
}

这样会更容易吗？

【讨论】：