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

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>