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

问题描述

我正在尝试制作一个形状不寻常的登录表单，但我正在努力解决border-radiuson a<div>和clip-path.

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

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左上角和右下角的被切断。有没有办法让这个干净？

而不是切掉角落，我希望它们如下图所示。

标签： htmlcss

这篇文章很有帮助：dev.to/afif/css-shapes-with-rounded-corners-56h

你的例子：

.block {
  display:inline-block;
  width:460px;
  height: 500px;
  color:red;
  margin:20px;
  filter:url(#round);
  backgroudn: red;
}
.block::before {
   content:"";
   display:block;
   padding-top:100%;
   background: red;
 
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

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

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

如果要更改径向角的值，请更改stdDeviationSVG 标签中的属性。

解决方案有一个问题是IOS显示不正确

我建议您将 SVG 用于类似的几何图形

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

问题描述

解决方案

推荐阅读