Elliptical border radius?

JonSnow

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!

Christophe

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related