CODEWITHSUNDEEP
htmlcss
JonSnow
JonSnow

Reputation: 335

Elliptical border radius?

I would like to draw a plane with pure html and css. My current basement is this: http://jsfiddle.net/SchweizerSchoggi/rq2ukwfk/

<div id="plane"></div>

#plane { 
  height: 100px;
  background-color: #ccc; 
  border: solid 1px #000; 
  border-radius: 120px 0 0 120px; 
}

I would like to have the "cockpit" on the left side more elliptical, not round. Is there a chance to realize this? Thanks for any help!

Upvotes: 3

Views: 2798

Answers (1)

Christophe
Christophe

Reputation: 4828

to get it more elliptical you could use:

border-radius: 50% 0 0 50%;

http://jsfiddle.net/rq2ukwfk/1/

You can do that in pure html and css but you will need more div elements. like something like this:

<div id="plane">
    <div id="cockpit-window"></div>
    <div id="left-wing"></div>
    <div id="right-wing"></div>
    <div id="tail"></div>
</div>

Some inspiration for you:

http://codepen.io/davidicus/pen/dDAqC

http://codepen.io/HugoGroutel/pen/dJniD

Upvotes: 6

Related Questions