Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Semi-oval with CSS

I'm trying to create a mix between an oval and a semi-circle.

Semi-circles can be created as such in CSS:

.halfCircle{
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     -moz-border-radius: 90px 90px 0 0;
     -webkit-border-radius: 90px 90px 0 0;
     background:green;
}

And ovals can be made like this:

.oval { 
    background-color: #80C5A0;
    width: 400px;
    height: 200px;
    margin: 100px auto 0px;
    border-radius: 200px / 100px;
}

But how can I make a semi-oval? Here's my attempt so far. The problem that happens is I've got flat tops, found here. Thanks!

like image 332
Nick Bull Avatar asked Jul 11 '13 13:07

Nick Bull


People also ask

How do you make a half oval in CSS?

If you put 50% before the slash symbol, you will get a vertical half-ellipse. And if you put 50% after the slash symbol, you'll get a horizontal half-ellipse.

How do you make an oval shape in CSS?

Draw a simple rectangle. Your choice of height and width , of the rectangle, will dictate the size and shape of the ellipse. The border-radius refers to the curvature at the corners of the ​shape; it should be set to a very high value (50% to 100%). An ellipse has been created!

How do I cut a circle in half CSS?

This can be done purely on CSS making use of borders. Keep note that height has to be half of the width to give the half circle. border-top-left or right-radius is the thing that adds the curve. So adding that extra +10 to it makes up for the space the border(which is set to 10px) creates.

What is half an oval called?

Definition of semioval : having the form of a half oval.


2 Answers

I've updated your demo with one possible solution:

div {
  background-color: #80C5A0;
  width: 400px;
  height: 100px;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
<div></div>

By using percentage based units for the border-radius it should always keep a smooth semi-ellipse regardless of your width and height values.

With a few minor changes, here's how you'd render the semi-ellipse split in half vertically:

div {
  background-color: #80C5A0;
  width: 400px;
  height: 100px;
  border-radius: 100% / 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
<div></div>
like image 162
André Dion Avatar answered Sep 19 '22 18:09

André Dion


http://jsfiddle.net/QGtzW/4/

.halfOval { 
    background-color: #a0C580;
    width: 400px;
    height: 100px;
    margin: 100px auto 0px;

    /* top-right top-left bottom-left bottom-right */
    /* or from 10.30 clockwise */
    border-radius: 50% 50% 0 0/ 100% 100% 0 0;
}
like image 41
yunzen Avatar answered Sep 18 '22 18:09

yunzen