如何在使用CSS clip-path时圆角

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

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

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

Codepen

太糟糕了，你不能把多边形和圆结合起来。也许你可以，而我还没有足够的时间去弄清楚它。HTH

Answer 2

我最近发现成功地尝试了这样的方法……

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路径的位置，以便在元素内使用"corner-radius“进行裁剪。

Answer 3

使用带有round属性的插入：

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