我有一个div元素，我想使用剪辑路径在其中添加内部曲线：多边形css...
我已经画出了基本的形状，但还不能把曲线画得平滑。
超文本：
<div id="clip_element">
</div>CSS：
#clip_element {
background-image: -webkit-linear-gradient(bottom, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
background-image: -o-linear-gradient(bottom, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
background-image: linear-gradient(to top, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-clip-path: polygon(0% 0%,100% 0%,100% 70%,90% 80%,80% 90%,70% 100%,0% 100%);
clip-path: polygon(0% 0%,100% 0%,100% 70%,90% 80%,80% 90%,70% 100%,0% 100%);
}如何用多边形裁剪路径使曲线平滑？
3条答案
按热度按时间s5a0g9ez1#
你可以通过使用伪元素
:after来得到这个。下面是使用这个的答案。希望它能有所帮助。li9yvcax2#
或者你可以使用svg剪辑路径或者将svg转换为css剪辑路径。所以，多边形是svg格式的。
svg创建并导出后，您可以直接在我们的css样式中使用路径标签d属性值，带有“clip-path”属性和值路径（“d属性值”）。
x一个一个一个一个x一个一个二个x
但是那个被剪切的路径没有响应，这意味着svg的宽度和高度只有在元素上被剪切。上面的例子显示svg有200.1px，但是元素“smooth_curve_box”有210.1px的宽度。所以，只有200.1px宽度的区域被剪切，剩下的都是空的。
如果我们想要裁剪区域的响应，那么我们需要转换svg路径d属性值从绝对路径到相对路径。
转换后可以得到路径d的属性值，如“M1，0.157 v0.409 c-0.069，-0.045，-0.147，-0.03，-0.213，0.056 c-0.067，0.088，-0.105，0.23，-0.11，0.379 H0.078 C0.035，1，0，0.93，0，0.07，0.035，0，078，0高度0.844临界值0.965，0.001，1，0.071，1，0.157"。
但是你不能直接在css中使用，所以，我们需要在下面的html示例中添加一些代码。
一个三个三个一个
上面的例子，第二个元素看起来不错，但第一个元素看起来不好。这里发生了什么？因为响应剪辑路径只基于长宽比工作。
如果我们只想对部分区域做出响应，那么我们需要另一个svg路径到css剪辑路径转换器here。
这里是使用上述在线svg路径转换器将svg路径转换为css剪辑路径的示例，其中部分区域为唯一响应。
xtfmy6hx3#
对于这个形状，我们也可以使用svg
mask-使用基元<rect>和<circle>。由于这些基本体支持相对单位-我们可以创建一个流体宽度遮罩。
首先，我们需要创建一个具有响应性/流畅布局的
<svg>：SVG不会挤压/扭曲圆角或圆形的大小。
然后我们需要将元素转换为
<mask>元素：现在我们可以把这个svg转换成一个data-URI，例如使用Yoksel's converter。
与基于多边形的css剪切路径相比，我们得到了一个相当紧凑的css规则，因为我们不需要用很多多边形顶点来近似曲线。
示例：svg掩码为数据URI