如何使用纯CSS创建此箭头

Question

如何使用纯CSS创建以下箭头？

到目前为止，我有这样的：

<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

这里有一个first crude mockup根据你的代码，并从cssarrowplease.com的CSS。基本上，它使用两个CSS三角形，一个比另一个小一点来创建箭头形状。

<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> 

Answer 2

这里有一个Working Fiddle

还是一个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; 
    }