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

Posted 2023-03-05

【中文标题】使用 CSS 剪辑路径时如何圆角

【英文标题】：How to round out corners when using CSS clip-path

【发布时间】：2015-10-24 06:21:07

【问题描述】：

我希望能够将我创建的这个形状的最左边的 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>

【问题讨论】：

bennettfeely.com/clippy

是的，这就是我用来制作形状的方法，但我只是不知道如何圆角。有什么想法吗？

你必须走我怀疑的 SVG 剪辑路径路线。我不认为polygon 支持曲线。 - sarasoueidan.com/blog/css-svg-clipping

@Paulie_D 是正确的。 CSS only clip-path 仅支持基本形状（如多边形、圆形）。它不支持形状或路径的组合，您必须为此使用 SVG（内联或外部）。

对于后来的读者，回答标题中的问题：在Clippy中注意您在inset()中有圆角边框选项：clip-path: inset(0 0 0 0 round 10%);

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

Codepen

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

【参考方案3】：

我最近发现尝试使用这种方法取得了成功...

SVG

<svg  >
  <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)"  ></rect>
      <rect x="var(--myRad)"  ></rect>
    </clipPath>
  </defs>
</svg>

CSS

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

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

【讨论】：

你能寄支笔吗？

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

对于那些错过上面@antoni 评论的人来说，我在这里的回答是有效地做与使用带有round 选项的 inset() 方法相同的事情。与 clip-path: inset(0 round 2rem) 类似，但请记住，浏览器并不总是支持 round 选项，因此请逐步增强或仅使用此 SVG 方法来兼容。

【参考方案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 来试用它。

【参考方案5】：

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

【参考方案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;"   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://***.com/a/65485455/8620333

【参考方案7】：

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

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

【讨论】：

太棒了！谢谢！