<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%; }