CODEWITHSUNDEEP
csscss-shapes
Anudeep GI
Anudeep GI

Reputation: 941

How to give a div oval shape?

I tried a lot on oval shape which have cut in both sides but not able to do it please enter image description here

I need code for oval shape with cut in both side..

Here's my code below:- 

.demo{
    width: 100%;
    height: 600px;
    background: white;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 178px;
    border-radius: 694px / 208px;

    z-index: 100;
    position: relative;
    }

Upvotes: 12

Views: 57206

Answers (5)

Mohammad Usman
Mohammad Usman

Reputation: 39322

Here are two possible variants:

Method #01:

Use radial-gradient():

background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);


body {
  background: linear-gradient(orange, red);
  padding: 0 20px;
  margin: 0;
}
.oval {
  background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
  height: 100vh;
}
<div class="oval">

</div>

Method #02:

  1. Create an overlay with :before or :after pseudo element.
  2. Add border-radius.
  3. Apply a large box-shadow with overflow: hidden on parent to hide undesired area.

body {
  background: linear-gradient(orange, red);
  padding: 0 20px;
  margin: 0;
}
.oval {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.oval:before {
  box-shadow: 0 0 0 500px #000;
  border-radius: 100%;
  position: absolute;
  content: '';
  right: -10%;
  left: -10%;
  top: 10%;
  bottom: 10%;
}
<div class="oval">

</div>

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

Is this OK ?

HTML

<div id="oval_parent">
    <div id="oval"></div>
</div>

CSS

#oval_parent{
    background:black;
    width:200px;
    height:120px;
    overflow:hidden;
}

#oval{
    width: 220px;
    height: 100px;
    margin:10px 0 0 -10px;  
    background: white;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

DEMO.

Upvotes: 20

MickMalone1983
MickMalone1983

Reputation: 1054

Put it inside another div which is high enough to show all the oval, not quite wide enough, and set overflow: hidden. If it's positioned at the centre the edges will be cut off, but you won't be able to side-scroll.

Upvotes: 0

Kedume
Kedume

Reputation: 335

Change the values on css:

#demo {
    width: 100%;
    height: 600px;
    background: white;
    -moz-border-radius: 50% / 250px;
    -webkit-border-radius: 40% / 250px;
    border-radius: 50% / 250px;

    z-index: 100;
    position: relative;
}

Upvotes: 1

boz
boz

Reputation: 4908

Try this:

#oval-shape {
    width: 200px;
    height: 100px;
    background: blue;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Notice the ratios in the corner values in relation to the height.

Demo - http://jsfiddle.net/XDLVx/

Upvotes: 4

Related Questions