如何在使用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>

- Eduardo Hernandez

---

http://bennettfeely.com/clippy/ - Paulie_D

是的，那就是我用来制作形状的，但我不知道如何将角落变圆。有什么想法吗？ - Eduardo Hernandez

你可能需要使用SVG剪切路径。我认为“polygon”不支持曲线。- http://sarasoueidan.com/blog/css-svg-clipping/ - Paulie_D

@Paulie_D 是正确的。CSS 的 clip-path 只支持基本形状（如多边形、圆形）。它不支持形状或路径的组合，您需要使用 SVG（内联或外部）来实现。 - Harry

针对标题问题的回答，供后续读者参考：请注意在Clippy中有一个圆角边框选项可以在inset()函数中使用，代码为：clip-path: inset(0 0 0 0 round 10%);。请注意，本翻译尽力保持原意，同时使内容更加通俗易懂，但不包括任何解释或其他内容。 - antoni

Answer 1

使用圆角属性与 inset：

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

- Angelotti

---

你能再深入解释一下吗？我真的不明白如何在这种形状上使用内嵌来圆角。 - undefined

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://dev59.com/r2Yq5IYBdhLWcg3wfgnd#65485455

- Temani Afif

---

这在Chrome中对我很有效，但在Firefox中不行。有什么解决方案吗？ - OttherCreek

不错，如果该形状具有不同颜色的边框，我们该如何添加边框？ - Akin Zeman

Answer 3

最近我尝试了一些像这样的方法，取得了成功...

可缩放矢量图形（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);
}

相比于将overflow设置为hidden并使用border-radius，我认为这种方法更加实用，因为它不会创建BFC或破坏sticky position和css perspective效果。此外，如果需要，这种方法允许您将svg路径的位置“插入”到具有“corner-radius”的元素内部进行剪辑。

- jonjohnjohnson

---

你能发一支笔吗？ - Elvio Cavalcante

@ElvioCavalcante 并没有完全缩小，但是在Chromium浏览器中尝试并为其他人添加前缀属性，您可以看到这个JSFiddle和我的原始答案示例之间的值如何派生。http://jsfiddle.net/y7heo6md/1/ - jonjohnjohnson

对于错过了@antoni评论的人，我的答案实际上与使用inset()方法和round选项做的事情相同。就像clip-path: inset(0 round 2rem)一样，但请记住，round选项并不总是被浏览器支持，因此可以逐步增强或只使用这种SVG方法来兼容。 - jonjohnjohnson

那么在SVG尺寸方面，您不能使用var/calc吗？您发布的jsfiddle将所有内容转换为像素，我无法根据您在此处发布的内容得到一个可行的示例。 - Azmisov

Answer 4

您还可以玩弄圆圈以获得不同的效果。

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

Codepen

很遗憾无法将多边形和圆形结合在一起... 或许可以，但我还没有尝试过足够的实验来弄清楚。希望对你有帮助。

- J-Roel

Answer 5

剪切路径: 插入(45% 0% 33% 10% 圆角 10像素)

- arturmoroz

Answer 6

您可以使用子元素并在其上进行嵌套的clip-path，以及子元素的伪元素。父元素将首先对形状进行polygon剪辑，然后伪元素将具有一个ellipse来圆角边框。剪辑将产生合并效果。

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

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

这是一个示例，为了说明情况进行了一些调整：

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, yellow 210px);
  margin-top: 15vh;
}

.parent div {
  background-color: blue;
  clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}

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

水平大小和位置可以用于在边缘上获得不同的椭圆效果。请注意，父元素的背景起始位置需要调整为与椭圆的放置位置相同（clip-path中的最后一个值），因为它会填充被剪裁掉的右侧内容。通过从第二个演示中的.parent div中删除background-color: blue进行可视化操作。 这里还有一个额外的Codepen供您尝试。

- Shikkediel

Answer 7

我没有评论选项，所以我把它写成了答案...

您需要尽可能多地写点来使角落变得更圆润。只是这样... 例如，在下部再加入一些点使其更加圆润：

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

哦，是的，在这里有一些人用SVG作为注释.. :)

- Eugene Kapustin