나는 내가 동적으로 채우기 색상을 변경할 수 있도록 CSS로를 만들 싶습니다 PNG로이 모양이이 단지 div의와 모양과 CSS를

Question

을 만드는 방법.

내 질문은 : div과 CSS 만 사용하면 가장 효과적으로이 이미지를 다시 만들 수 있습니까?

주황색 채우기 주위에는 5px 흰색 선이 있습니다. 그 스트로크도 만들어야합니다. 그리고 오른쪽의 커브 오른쪽 영역은 투명해야합니다. CSS는 배경 이미지와 같은 외부 애셋을 사용할 수 없습니다.

이상적으로 CSS는 IE 7, 8 및 9를 포함한 대부분의 브라우저에서 작동합니다.하지만 꼭 필요한 것은 아닙니다.

CSS 마법사를 사용하면 가장 어두운 더러워진 CSS 비밀을 보여줍니다. 나는 사이트가 나를 허용하자마자 50에 대해 현상금을 부과 할 것이고, 당신이 대답을 제출할 때를 불문하고 최선의 답을 완벽하게 수여 할 것이다.

당신이 가진 것을 보자.

Answer 1

은

HTML ... 결국

#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; 
} 

Answer 2

이 버전은 또한 IE9와 호환되는 크기를 변경, 정확한 색상을 넣어

<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

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을 보지 않고,