Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to give a div oval shape?

Tags:

css

css-shapes

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;
    }
like image 684
Anudeep GI Avatar asked Oct 19 '12 10:10

Anudeep GI


People also ask

How do I make a circle or oval in CSS?

Try Mailchimp today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

How do you make shapes in CSS?

The Shapes of CSS. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

How do I turn a rectangle into a circle or oval?

Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after pseudo-elements in CSS, which give us the potential of two more shapes we can add to the original element.

What is the best way to draw a shape?

These days, you’re best bet for drawing shapes is either SVG or using a clip-path in CSS, which is SVG-like (and can reference SVG). For example, look at these SVG icon sets, or this clip-path editor.


1 Answers

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.

like image 81
The Alpha Avatar answered Sep 21 '22 05:09

The Alpha