11

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

Stewartside
  • 20,378
  • 12
  • 60
  • 81
Ashok Dongare
  • 521
  • 2
  • 7
  • 20

4 Answers4

14

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>
Stewartside
  • 20,378
  • 12
  • 60
  • 81
  • 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. – Si8 Apr 21 '17 at 14:56
  • 1
    @Si8 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. – Stewartside Apr 21 '17 at 15:15
  • @Stewartside :) 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? – Si8 Apr 21 '17 at 15:40
  • 1
    @Si8 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 :) – Stewartside Apr 21 '17 at 15:59
  • So you used Moveto, Lineto, and Curveto? Just trying to understand. – Si8 Apr 21 '17 at 16:35
6

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>
Persijn
  • 14,624
  • 3
  • 43
  • 72
  • You are missing `L` in `100, 0`. Does SVG automatically knows it's `Lineto`? – Si8 Apr 21 '17 at 16:36
  • @Si8 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. – Persijn Apr 21 '17 at 17:32
  • 1
    Ahhhh.... so you didn't use an L... now i got it. Still learning the SVG – Si8 Apr 21 '17 at 20:16
2

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>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
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

Buzzzzzzz
  • 1,074
  • 13
  • 17