椭圆边界半径？

Question

我想画一个纯html和CSS的飞机.我目前的地下室是: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; 
}

我想让左侧的"驾驶舱"更加椭圆形,而不是圆形.有没有机会实现这一点？谢谢你的帮助!

Answer 1

为了让它更加椭圆你可以使用:

border-radius: 50% 0 0 50%; 

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

您可以在纯HTML和CSS中执行此操作,但您将需要更多div元素.像这样的事情:

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

给你一些灵感:

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

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