CodePen

HTML

            
              #content
  %aside.arrow Arrow
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $bg: #E8B5DB;
$color-arrow: #8D96ED;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  margin: 0;
  font-family: Open Sans, sans-serif;
  font-size: 20px;
  text-align: center;
  @include background(linear-gradient(left, adjust-hue(lighten($bg,5),10), $bg 50%, adjust-hue(lighten($bg,5),10)));
}
html {min-height: 100%;}

#content {
  width: 160px;
  margin: 25px auto;
}

aside {
  margin: 20px 0;
  line-height: 34px;
  position: relative;
  cursor: pointer;
  user-select: none;
  &:hover {
    top: -1px;
  }
  &:active {
    top: 1px;
  }
  &.arrow {
    background-color: $color-arrow;
    &:after, &:before {
      border-width: 17px 0 17px 17px;
    }
    &:before {
      border-color: $color-arrow transparent;
      left: -17px;
    }
    &:after {
      border-color: transparent $color-arrow;
      right: -17px;
    }
  }
}

aside:before, aside:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................