how to create this shape with only divs and css

Question

I have this shape as a PNG that I would like to create it with CSS so that I can dynamically change the fill color.

My question is: How can I most effectively recreate this image using only divs and CSS?

Note that there is a 5px white stroke around the orange fill. That stroke needs to be created as well. And the area to the right of the curve on the right needs to be transparent. Your CSS can not use external assets such as background images.

Ideally the CSS would work in the majority of browsers including IE 7, 8 and 9. But that's not absolutely required.

Go forth you CSS wizards and show me your darkest dirtiest CSS secrets. I will be putting a bounty of 50 on this as soon as the site allows me, and will award that fully to the best answer, regardless of when you submit you answer.

Let's see what you've got.

try to look at SVG and PATH : w3schools.com/svg/svg_path.asp — Alex Peta
– Alex Peta, Commented Nov 17, 2012 at 15:50
@Simon Lehmann Wow, you taught me something about w3schools. I had no idea. Thanks for the link. — Clarice Bouwer
– Clarice Bouwer, Commented Nov 20, 2012 at 5:11
You cant do a round shape in ie7-8 Unless you use pictures so you could do "jacktheripper" example for the new browsers and then use a <!--[if lte IE8]> and use a picture instead here — Simon Dragsbæk
– Simon Dragsbæk, Commented Nov 22, 2012 at 8:08

jacktheripper · Accepted Answer · 2012-11-24 21:02:06Z

33

+50

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

I dare you to guess which one is which without looking at the HTML ;)

edited Nov 24, 2012 at 21:02

answered Nov 17, 2012 at 16:10

jacktheripper

14.3k12 gold badges62 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ScottS Over a year ago

+1 as you were the first to address the note about the 5px white stroke around it.

Rafe Over a year ago

pretty close. I get a bit of black coming through on the ends of the arc in FF.

ScottS Over a year ago

@Rafe--seems to be partially based off the numbers chosen. If I change the 18% to 20% for me Firefox renders it better, so it may be a factor of picking just the right number for your application.

Savi · Accepted Answer · 2012-11-20 13:04:28Z

5

This version is also compatible with 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;   
}

edited Nov 20, 2012 at 13:04

answered Nov 17, 2012 at 16:03

Savi

1064 bronze badges

Comments

mychalvlcek · Accepted Answer · 2012-11-26 11:35:04Z

4

just put the correct color, eventually change the dimensions

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

edited Nov 26, 2012 at 11:35

answered Nov 17, 2012 at 15:59

mychalvlcek

4,0762 gold badges23 silver badges36 bronze badges

1 Comment

Simon Lehmann Over a year ago

position, margin, text-align, text-indent and color don't affect the shape at all. border-color would be nice to add though.

Collectives™ on Stack Overflow

how to create this shape with only divs and css

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related