css div框加小箭头

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

.con{
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 50px auto;
background-color:#ccc;
}
.arrow{
border-bottom: 10px solid #ccc;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #fff;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}

.gdarrow {
    border-bottom: 12px solid #fff;
    border-right: 12px solid rgba(0, 0, 0, 0);;
    border-left: 12px solid rgba(0, 0, 0, 0);;
    border-top: 12px solid rgba(0, 0, 0, 0);;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -24px;
    left: 45%;
}