如何使用div和css创建此形状

Question

  

我将这个形状作为PNG，我想用CSS创建它，以便我可以动态更改填充颜色。

我的问题是：如何仅使用div和CSS最有效地重新创建此图像？

请注意橙色填充周围有5px的白色笔触。那个中风也需要创造。右边曲线右侧的区域需要透明。您的CSS无法使用外部资源，例如背景图像。

理想情况下，CSS适用于大多数浏览器，包括IE 7,8和9.但这并非绝对必要。

向你发送CSS向导，向我展示你最黑暗的CSS秘密。一旦网站允许我，我就会在此上投入50美元的奖金，无论你何时提交答案，我都会将其全部奖励给最佳答案。

让我们看看你有什么。

Answer 1

<强> HTML

<div id="css"></div>​

<强> CSS

#css {
  width: 118px;
  height: 74px;
  margin: 20px 20px;
  background: red;
  border: 6px solid white;
  border-radius: 20% / 62%;
  border-top-left-radius: 6px; 
  border-bottom-left-radius: 6px; 
}

Live example

我敢于猜测哪一个没有查看HTML;）

Answer 2

此版本也与IE9兼容......

HTML

<meta http-equiv="X-UA-Compatible" content="IE=9" />​
<div id="image">
</div>

CSS：

#image{
background:orange;
 border: 5px solid white;
-moz-border-radius: 20% / 60%;
-webkit-border-radius: 20% / 60%;
border-radius: 20% / 60%;
-moz-border-top-left-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
height:100px;
width:150px;   
}

Answer 3

只需输入正确的颜色，最终改变尺寸

#shape {
  width: 200px;
  height: 150px;
  background: orange;
  border: 5px solid white;
  border-radius: 15% / 50%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}