椭圆形边框半径？

Question

3

我想用纯html和css绘制一个平面图。

我的当前基础是这个链接：

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

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

我希望左侧的“驾驶舱”更加椭圆形，而不是圆形。有实现这个想法的机会吗？感谢任何帮助！

- JonSnow

我认为纯CSS不可能实现。请查看SVG椭圆弧： http://www.svgbasics.com/arcs.html - DNReNTi

http://codepen.io/dogagenc/pen/xbRKZx 这很不错，但可能没有太多帮助。 - Drops

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christophe · Accepted Answer

如果要更加简洁，您可以使用以下方式：

border-radius: 50% 0 0 50%;

您可以使用纯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>

以下是一些启发：