使用 CSS 剪辑路径时如何圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31765345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to round out corners when using CSS clip-path
提问by Eduardo Hernandez
I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?
我希望能够在我创建的这个形状上将最左边的 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>回答by J-Roel
You can also mess around with the circle to get some different effects.
你也可以用圆圈来弄乱，以获得一些不同的效果。
-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);
Too bad you can't combine the polygon and circle... or maybe you can and I haven't played around with it enough to figure it out. HTH
太糟糕了，你不能把多边形和圆结合起来……或者你可以，但我还没有玩够它来弄清楚。HTH
回答by jonjohnjohnson
I've recently found success experimenting with approaches like this...
我最近发现尝试这样的方法取得了成功......
SVG
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
CSS
.clipped {
--myWidth: 100vw;
--myHeight: 10rem;
--myRad: 2rem;
clip-path: url(#clipped);
}
I found this useful as compared to using border-radius with overflow set to hidden, because this approach doesn't create a BFC or break things like sticky position and css perspective effects. Also, this allows you to "inset" the position of the svg paths to clip inside the element with a "corner-radius" if you want.
我发现这与使用将溢出设置为隐藏的边界半径相比很有用，因为这种方法不会创建 BFC 或破坏诸如粘性位置和 css 透视效果之类的东西。此外，如果需要，这允许您“插入”svg 路径的位置以使用“角半径”在元素内剪辑。
回答by Shikkediel
You could use a child element and do a nested clip-pathon that and the child's pseudo element. The parent will do a polygonclip on the shape first, then the pseudo will have an ellipseto round the borders. The clips will have a combined effect.
您可以使用子元素并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>Here is the demo with some adaptations to illustrate what's going on:
这是带有一些改编的演示，以说明正在发生的事情：
.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>The horizontal size and position of the ellipse can be used to get a different effect on the edges. Note that the background starting postion of the parent needs to be adjusted to the same value as the placement of the ellipse (last value in the clip-path) because it fills up whatever gets clipped off on the right side. This can be visualised by removing background-color: bluefrom .parent divin the second demo.
椭圆的水平尺寸和位置可用于在边缘上获得不同的效果。请注意，父对象的背景起始位置需要调整为与椭圆的位置（ 中的最后一个值clip-path）相同的值，因为它填充了右侧被剪掉的任何内容。这可以通过background-color: blue从.parent div第二个演示中删除来可视化。
Hereis an additional Codepen to to try it out.
这是一个额外的 Codepen 来尝试一下。
回答by Eugene Kapustin
I don't have a comment option yes, so I'm writing it as an answer..
我没有评论选项是的，所以我写它作为答案..
you need to write as many points as possible to round the corner. Nothig else... for, example a few more points to make lower part bit rounder:
你需要写尽可能多的点来绕过拐角。没有别的……例如，还有几个点可以使下半部分更圆：
-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);
oh, yes, or SVG as comment people here.. :)
哦，是的，或者 SVG 作为评论人在这里.. :)
