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

Question

在本文档中：

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

clip-path属性的用法如下

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

确实可以在div的底部剪切一个椭圆，但我想在div的顶部剪切一个椭圆。我该怎么做呢？如果我想切一个凹椭圆而不是凸椭圆呢？

Answer 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 );
}

​

这会让它变得更容易吗？