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

Question

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

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

请注意，橙色填充周围有一个 5px 的白色描边。该笔画也需要创建。并且右侧曲线右侧的区域需要透明。您的 CSS 不能使用背景图片等外部资源。

理想情况下，CSS 将适用于大多数浏览器，包括 IE 7、8 和 9。但这并不是绝对必需的。

你们这些 CSS 奇才，向我展示你们最黑暗、最肮脏的 CSS secret 。只要网站允许，我就会悬赏 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 的情况下猜出哪个是哪个 ;)