剪贴路径：椭圆属性如何使用？

Question

在这个文档中。

剪贴路径属性的使用方式就像

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

与vhvw值，你可以做一些类似的东西。

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

这是否使它更容易？