如何使“剪辑路径”中的径向角看起来干净？

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>