8

div と CSS のみを使用して作成する必要がある形状

この形状は PNG としてあり、塗りつぶしの色を動的に変更できるように CSS で作成したいと考えています。

div私の質問は、 s と CSSのみを使用してこの画像を最も効果的に再現するにはどうすればよいですか?

オレンジ色の塗りつぶしの周りに 5px の白い線があることに注意してください。そのストロークも作成する必要があります。また、右側の曲線の右側の領域は透明にする必要があります。CSS では、背景画像などの外部アセットを使用できません。

理想的には、CSS は IE 7、8、および 9 を含む大部分のブラウザーで動作します。しかし、それは絶対に必要というわけではありません。

CSS ウィザードに行って、あなたの最も暗い最も汚い CSS の秘密を見せてください。サイトで許可され次第、これに 50 の報奨金を与えます。いつ回答を提出したかに関係なく、最高の回答に全額を授与します。

あなたが持っているものを見てみましょう。

4

3 に答える 3

33

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を見ずに、どれがどれかを推測してみてください;）

于 2012-11-17T16:10:35.647 に答える
5

このバージョンは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;   
}
于 2012-11-17T16:03:01.753 に答える
4

正しい色を入れるだけで、最終的に寸法を変更します

#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;
}
于 2012-11-17T15:59:59.373 に答える