Creating s-shaped curve using css
Asked Answered
S

4

12

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

enter image description here

I was trying 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

Suint answered 9/10, 2015 at 10:11 Comment(4)
Not impossible with CSS but please use SVG for such double curves. If you really want to create such 'S' or wave shapes with CSS have a look here - #27777970Badge
To be honest I'm not a css guy. what is this SVG.Suint
developer.mozilla.org/en-US/docs/Web/SVG :)Badge
I'll take a look. Thanks.Suint
A
15

SVG

As Harry suggested in the comments, SVG would be your best option as a double curve in CSS isn't feasible without using multiple elements, pseudo elements or using possibly unsupported CSS3 properties.

SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.

It is well supported across all browsers as viewable 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>

CSS

Ofcourse this is still possible with CSS but does take using pseudo elements :before and :after. It is also not best for the curves as it will render them without anti-aliasing

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>
Afrit answered 9/10, 2015 at 10:24 Comment(5)
What if the SVG one I want it flipped? Instead of on the left, it will be on the right so the curve is on the left? Thanks.Obstruct
@Obstruct So you could just hack it and use a css transform to flip it. Alternatively you can swap the co-ordinates which would take about 5 mins.Afrit
@Afrit :) I just did transformY which I didn't think of at first but again today is Friday... Thanks for the response. Do you happen to know a site which allows me to change around the coordinate the svg updates real time?Obstruct
@Obstruct you can do it in codepen, jsfiddle or any front end dev tool. This was a handwritten SVG aand its not a hugely difficult thing if you give it a go yourself :)Afrit
So you used Moveto, Lineto, and Curveto? Just trying to understand.Obstruct
E
7

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>
Erena answered 9/10, 2015 at 10:27 Comment(3)
You are missing L in 100, 0. Does SVG automatically knows it's Lineto?Obstruct
@Obstruct when you start an SVG path with M you can chain them so M0,0 100,0 is a line from 0,0 to 100,0. you can do this infinite times M1,1 2,2 3,3 etc.Erena
Ahhhh.... so you didn't use an L... now i got it. Still learning the SVGObstruct
T
3

You could make this using pure CSS if you so wished.

Demo

This uses a large box shadow to create the second curve:

.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>
Tabbatha answered 12/10, 2015 at 9:6 Comment(0)
B
1

I had a similar requirement but found the CSS for this task to be far too complex for my knowledge level. So, instead, I used an online wave generator. With that, you can draw the wave you need and generate the SVG. Then all you have to do is just copy-paste code for the generated wave. This is the one I used:
svg wage generator

Blesbok answered 23/7, 2021 at 11:52 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.