<div class="triangle">Стрелка реализована псевдоэлементом, тени — box-shadow.</div>
body {
  background-color: #888;
}

.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #bada55;
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.triangle::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -1em;
    top: 1px;
    left: 50%;
    box-sizing: border-box;
    
    border: 1em solid black;
    border-color: #bada55 #bada55 transparent transparent;
    
    transform-origin: 0 0;
    transform: rotate(-45deg);
    
    box-shadow: 3px -3px 3px 0 rgba(0, 0, 0, 0.3);
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.