Pin Arrow

by iamjpg

HTML

<div class="arrow_container">
  <div class="arrow_content">
    $500k
  </div>
  <div class="arrow_box">

  </div>
</div>

CSS

.arrow_container {
  position: relative;
  width: 281px;
  height: 200px;
  text-align: center;
  -webkit-filter: drop-shadow(0 1px 2px rgba(34, 25, 25, 0.4));
  filter: drop-shadow(0 1px 2px rgba(34, 25, 25, 0.4));
  z-index: 1;
}

.arrow_content {
  background: #fff;
  padding: 5px;
  border-radius: 3px;
  min-height: 100%;
  -webkit-filter: drop-shadow(0 1px 2px rgba(34, 25, 25, 0.4));
  filter: drop-shadow(0 1px 2px rgba(34, 25, 25, 0.4));
  z-index: 1;
}

.arrow_box {
  position: absolute;
  right: 13px;
  height: 2px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  color: #fff;
  z-index: 2;
  -webkit-filter: drop-shadow(0 0px 2px rgba(34, 25, 25, 0.4));
  filter: drop-shadow(0 1px 0px rgba(34, 25, 25, 0.4));
}