Creating an s-curve using css

Question

I want to create a curve as shown in the figure below using css.

I tried something like this:

.curve { background-color: #8aa7ca; height: 65px; width: 160px; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; } 

 <div class="curve"> <p>This is a sample text.</p> </div> 

Please help me

Answer 1

Svg

As Harry suggested in the comments, SVG would be your best option since a double curve in CSS is not possible without using multiple elements, pseudo-elements, or using possibly unsupported CSS3 properties.

SVG stands for scalable vector graphics. The web browser views it as an image, but you can add text and regular HTML elements to SVG.

It is well supported in all browsers as visible here: CanIUse

 <svg width="466" height="603" viewbox="0 0 100 100" preserveAspectRatio="none"> <path d="M0,0 L100,0 C25,50 50,75 0,100z" fill="#8aa7ca" /> </svg> 

• SVG on MDN

CSS

Of course, this is still possible with CSS, but it uses the :before and :after pseudo-elements. It is also not suitable for curves, as they will render them without smoothing.

 div { background: blue; width: 50px; height: 75px; position: relative; } div:before { content: ''; background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px); position: absolute; top: 0; left: 100%; width: 100px; height: 75px; } div:after { content: ''; position: absolute; width: 50px; height: 75px; background: blue; border-radius: 0 0 100% 0 / 0 0 100% 0; top: 100%; left: 0; } 

 <div></div> 

Answer 2

Svg

In svg this can be created using a single path

 <svg height="300px" viewBox="0 0 100 100"> <path fill="CornFlowerBlue" d="M0,0 100,0 C50,20 50,80 0,100 Z" /> </svg> 

Answer 3

You can do this using pure CSS if you want.

Demo

To create a second curve, use the shadow of a large tag:

 .wrap { position: relative; height: 400px; width: 100%; margin: 0 auto; max-width: 1024px; } .shape { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; z-index: 10; } .shape:after { content: ""; position: absolute; top: 10%; left: 0; width: 100%; height: 90%; border-radius: 0 50% 0 0; box-shadow: 0 0 0 999px lightgray; } .shape2 { position: absolute; top: 0; left: 50%; height: 100%; width: 50%; background: lightgray; border-radius: 0 0 0 50%; z-index: 10; } /******************************/ html, body { margin: 0; padding: 0; height: 100%; vertical-align: top; overflow: hidden; background: cornflowerblue; } 

 <div class="wrap"> <div class="shape"></div> <div class="shape2">This will be where you can place the text to go down the right hand side of the slider</div> </div>