使用CSS剪辑路径时如何圆角

Question

我希望能够在我创建的这个形状上找出最左边的3个角落,不知道如何做到这一点？

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

<div></div>

Answer 1

使用带有 round 属性的 inset ：

inset(0% 45% 0% 45% round 10px)

Answer 2

SVG 过滤器可以舍入任何类型的clip-path. 您只需将其应用到父元素即可。调整stdDeviation来控制半径：

.box {
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.parent {
  filter: url('#goo');
  overflow:hidden;
  position: fixed;
  right:-50px;
  z-index: 1;
  margin-top: 10vw;
}

<div class="parent">
  <div class="box"></div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" 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>

相关：https ://stackoverflow.com/a/65485455/8620333

Answer 3

你也可以用圆圈来弄乱以获得一些不同的效果。

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

代码笔

太糟糕了，你不能把多边形和圆结合起来……或者你可以，但我还没有玩够它来弄清楚。HTH

Answer 4

剪辑路径：插图（45% 0% 33% 10% 圆形 10px）

Answer 5

我最近发现成功尝试这种方法...

SVG

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

的CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

与使用将溢出设置为隐藏的边界半径相比，我发现此方法很有用，因为这种方法不会创建BFC或破坏粘性位置和CSS透视效果之类的东西。另外，如果需要，这还允许您“插入” svg路径的位置，以使用“角半径”在元素内部进行裁剪。

Answer 6

我没有评论选项是的，所以我把它写为答案..

你需要写下尽可能多的点来绕过拐角。没有别的......例如，还有几点可以使下部更圆：

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

哦，是的，或者 SVG 作为评论者在这里..:)