前端css如何实现箭头

<div class="arrow_box">

    <div class="arrow"></div>

</div>

.arrow_box{

    width:100px;

    height:100px;

    border-radius: 10px;

    background: rgba(255,0,0,0.5);

    position: relative;

}    

.arrow{

    width:0;

    height:0;

    border-width: 10px;

    border-style:solid;

    border-color:transparent transparent transparent rgba(255,0,0,0.5);

    position: absolute;

    right:-20px;

    top:35px;

}