html - 如何使 `clip-path` 中的径向 Angular 看起来干净？

Question

我正在尝试制作一个形状不寻常的登录表单，但我正在努力处理 border-radius在 <div> 上用clip-path .

这是我在 <div> 上使用的 CSS :

background: red;
height: 80%;
-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
clip-path: polygon(100% 0, 0 0, 100% 100%);
border-radius: 5em;

目前看起来是这样的:

如您所见，border-radius在左上角和右下角被切断。是否有解决方法可以使它变得干净？

我希望它们不会被切掉，如下图所示。

Answer 1

试试这个:

.block {
  background: red;
  height: 300px;
  width: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  border-radius: 10px;
}

 <div class="block"></div>