<div class="example">
  
  <div class="arrow">
    <div class="content">no shadow</div>
  </div>

  <div class="arrow box-shadow">
    <div class="content">box-shadow</div>
  </div>

  <div class="arrow filter-drop-shadow">
    <div class="content">filter: drop-shadow</div>
  </div>
  
</div>

* {
  background-color: #ccc;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
}

.example {
  max-width: 650px;
  margin: 0 auto;
}

/* Arrow */

.arrow {
  display: inline-block;
  width: auto;
  height: 100px;
  line-height: 100px;
  background: transparent;
  margin: 10px;
}

.arrow:before, .arrow:after {
  display: inline-block;
  height: inherit;
  content: '';
  background-image: url(http://res.cloudinary.com/dm7h7e8xj/image/upload/v1502792948/seta_g2kwnz.png);
}

.arrow:before {
  float: left;
  width: 25px;
}

.arrow:after {
  float: right;
  width: 30px;
  background-position: center right;
}

.arrow .content {
  display: inline-block;
  height: inherit;
  background-color: #fff;
  padding: 0px 20px;
}

/* Effects */

.box-shadow {
  box-shadow: 0 3px 5px rgba(0,0,0,.3);
}

.filter-drop-shadow {
  -webkit-filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
  -moz-filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
  -ms-filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
  -o-filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.3));
}