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!
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.
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!
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.
Definition of semioval : having the form of a half oval.
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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With