How to draw a curve by using div? - html

Question

I need to draw two curves, using CSS.
I have tried to assemble some divs, using CSS border-radius to draw the curved panel. But the result is bad. Any better arithmetic?

Answer 1

As I had mentioned in comments earlier, please do not use CSS for achieving complex curves and shapes. While it is still possible to use CSS to achieve them (using transform + pseudo-elements like shown in this thread or using box-shadows in this thread), the process is very complex and you can't get much control over the shape, its curvature etc also. SVG on the other hand is designed for such graphics and it can also be scaled without any issues.
Below is a sample snippet on how to create the shape using a couple of cubic bezier curve (c) commands. The cubic bezier curve command takes 3 sets of parameters in total where the first two sets represent the coordinates of the control points for the initial and end points of the curve and the last set represents the coordinates of the actual end point of the curve.
You can control the curvature by modifying the control points.
.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>