我需要使用 CSS 绘制两条曲线。
我尝试过组装一些divs，使用CSSborder-radius绘制弧形面板。但结果很糟糕。还有更好的算术吗？
正如我之前在评论中提到的，请不要使用CSS用于实现复杂的曲线和形状。虽然仍然可以使用 CSS 来实现它们（使用transform+ 伪元素如所示这个线程 https://stackoverflow.com/questions/27777470/wave-or-shape-with-border-on-css3/27780572#27780572或使用box-shadows in 这个线程 https://stackoverflow.com/questions/28986125/double-curved-shape/28988476#28988476），这个过程非常复杂，你也无法对形状、曲率等进行太多控制。另一方面，SVG 是为此类图形设计的，并且它也可以毫无问题地缩放。
下面是关于如何使用几个创建形状的示例片段三次贝塞尔曲线（c) 命令 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d。三次贝塞尔曲线命令总共需要 3 组参数，前两组参数表示曲线起点和终点的控制点坐标，最后一组参数表示曲线实际终点坐标。
您可以通过修改控制点来控制曲率。
.container {
position: relative;
width: 300px;
}
.container > div {
display: inline-block;
box-sizing: border-box;
}
.items {
width: 100%;
height: 250px;
border-radius: 10px;
border: 1px solid #BBB;
overflow: hidden;
}
.shape {
position: absolute;
top: 50%;
right: 0%;
height: 100px;
width: 40px;
transform: translateX(100%) translateY(-50%);
}
path {
stroke: #AAA;
fill: #DDD;
}
line {
stroke: #444;
}
<div class="container">
<div class="items">
</div>
<div class="shape">
<svg viewBox='0 0 50 100' preserveAspectRatio='none'>
<path d='M0,0
c10,15 40,15 48,35
v30
c-8,20 -38,20 -48,35'></path>
<line x1='15' y1='45' x2='30' y2='45' />
<line x1='15' y1='50' x2='30' y2='50' />
<line x1='15' y1='55' x2='30' y2='55' />
</svg>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
