CODEWITHSUNDEEP
htmlcsswebgeometry
gustavla
gustavla

Reputation: 42

How to make an oblique oval in CSS?

I am trying to create an oblique oval in CSS/HTML, but having some issues.

I have tried creating a normal oval and then rotating it a few degrees according to the code below, but it just rotates the underlying rectangle and applies the bordier radius thereafter.

Here is what I tried:

.circle{
    width:100px;
    height:50px;
    border-radius:50px;
    background:#000;
    -webkit-transform: rotate(27deg);
}

Upvotes: 1

Views: 1563

Answers (3)

Maen
Maen

Reputation: 10698

You shall use a relative border-radius, and set it to 50% to have a perfect oval.

Then, you could try with skew instead :

.circle{
    -webkit-transform: skew(27deg);
}

Will render this : skew

While rotate will render this: rotate

Upvotes: 1

enguerranws
enguerranws

Reputation: 8233

Working here, I just put border-radius: 50%;

http://jsfiddle.net/4RkhW/

Upvotes: 0

MarijnS95
MarijnS95

Reputation: 4793

Try making your border radius 50% (or 500px)

border-radius:50%;

Edit: to improve my answer, the code you posted is correct for creating an oblique oval, except that the border radius is not correct. It needs to be 50%, as that makes perfect corners, eg. for a circle. Then you just use the width/height to stretch the circle to get an oval, and use the transform:rotate(27deg); to make it an oblique oval.

Upvotes: 0

Related Questions