Arrow and ellipse using css

by Avdhut Sonpethkar

HTML

<div class="arrow_thought">
    <p>This sample text</p>
    
</div>

CSS

.arrow_thought
{
    height: 70px;
    width: 230px;
    border-radius: 120px / 35px ;
    -moz-border-radius: 120px / 35px ;
    -webkit-border-radius:120px / 35px ;
    background: #afcc2d;
    text-align:center;
    line-height: 70px;
}
.arrow_thought:after
{
    content: "";
    position: absolute;
    border: 20px solid transparent;
    border-top: 30px solid #afcc2d;
    top: 77px;
    margin-left: -70px;


}