How do I create this arrow using pure CSS - css

Question

How do I create the following arrow using pure CSS ?
So Far, I have this:
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft">Left</div>
</div>

Answer 1

Here's a Working Fiddle
Or a bigger One
<div class="HalfCircleLeft"></div>
.HalfCircleLeft
{
margin: 100px;
height: 100px;
width: 50px;
border-radius: 0 50px 50px 0;
background-color: #cfa040;
position: relative;
}
.HalfCircleLeft:before
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
top: 40px;
left: 10px;
}
.HalfCircleLeft:after
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cfa040;
top: 40px;
left: 13px;
}

Answer 2

Here's a first crude mockup based on your code and the css from cssarrowplease.com. Basically, it uses two CSS triangles, one a bit smaller than the other to create the arrow shape.
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:#00FF00;
}
.arrow_box {
position: relative;
top: 50%;
}
.arrow_box:after, .arrow_box:before {
right: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 255, 0, 0);
border-right-color: #00ff00;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft"><div class="arrow_box"></div></div>
</div>