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

Question

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

我的问题是:如何仅使用divs和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; 
}

实例

我敢让你猜不出哪一个没有看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;
}