如何使用html5，css3获得椭圆形[重复]答案

【问题标题】：How to get a ovel shape by using html5, css3 [duplicate]如何使用html5，css3获得椭圆形[重复]
【发布时间】：2015-01-02 20:38:05
【问题描述】：

<!DOCTYPE html>
 <head>
 <title> Oval shape</title>
 </head>
 <body>
 <div style="width:400px; height:400px; background-color:#ff0;">Oval</div>

  <p> This is Oval shape by using html5, css3.</p>
 <body>
</html>

我写了这样的代码..我想要 div 标签为椭圆形..你能告诉我...

【问题讨论】：

请贴出你目前尝试过的CSS..
我已经在代码中编写了内联 css...
请查看css-tricks.com/examples/ShapesOfCSS
是的，我明白了...谢谢大家...
另见how to make an oval in css

标签： html css css-shapes

【解决方案1】：

html

 <div id="oval">Oval</div> <p> This is Oval shape by using html5, css3.</p>

css

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

请看下面的链接

http://jsfiddle.net/Mithun146/b4k20ruw/

【讨论】：

是的，我明白了.. thakyou...
很遗憾，这不是响应式解决方案。

【解决方案2】：

您可以使用边框半径来允许动态尺寸。我还要指出真的这个 css 不需要前缀：

div{
  height:100px;
  width:200px;
  border-radius:50%;
  background-color: #ff0;
  }

&lt;div&gt;&lt;/div&gt;

【讨论】：