使用 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

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

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

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

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

Answer 2

你也可以把圆圈弄乱，得到一些不同的效果。

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

Codepen

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

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);
}

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

Answer 4

您可以使用子元素并在该元素和子元素的伪元素上嵌套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 来可视化。

Here 是一个额外的 Codepen 来试用它。

Answer 5

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

Answer 6

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 7

使用带有圆形属性的插图：

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