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

Question

我有这个形状作为PNG，我想用CSS创建它，这样我就可以动态地改变填充颜色。

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

请注意，橙色填充周围有一个 5 像素的白色描边。还需要创建该笔画。并且右边曲线右边的区域需要是透明的。您的 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; 
}

活生生的例子

我敢让你不看 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;
}