div.wrap

  span.arrow
    span
    span

  span.arrow--l-r.right
    span
    span
    span
    span
    span
View Compiled
// Default document styling
@import 'https://fonts.googleapis.com/css?family=Lato'

html
  height 100%
  font-size 20px
  

body
  min-height 100%
  font-family Lato
  color #3d3d3d
  background-color RebeccaPurple
  display flex
  justify-content center
  align-items center
  
// Arrow

.arrow
  width 1.25rem
  height 1.25rem
  display inline-block
  position relative
  margin 0 1rem

  span
    top .5rem
    position absolute
    width .75rem
    height .1rem
    background-color #efefef
    display inline-block
    transition all .2s ease

    &:first-of-type
      left 0
      transform rotate(45deg)

    &:last-of-type
      right 0
      transform rotate(-45deg)

  &.active

    span
      &:first-of-type
        transform rotate(-45deg)

      &:last-of-type
        transform rotate(45deg)

        
.arrow--l-r
  width 1.25rem
  height 1.25rem
  display inline-block
  position relative
  margin 0 1rem
  
  &.left
      span:nth-child(4)    
        transform rotate(-45deg)
      
      span:nth-child(5)    
        transform rotate(45deg)
        
  &.right
      span:nth-child(1)    
        transform rotate(-45deg)
      
      span:nth-child(2)    
        transform rotate(45deg)

  span
    position absolute
    height .1rem
    background-color #efefef
    transition transform .2s ease
    
    &:nth-child(1)    
    &:nth-child(2)    
    &:nth-child(4)    
    &:nth-child(5)    
      width .625rem
      top .625rem
    
    &:nth-child(1)    
      right 0 
      transform-origin bottom right 
      
    &:nth-child(2)    
      right 0
      transform-origin top right 
    
    &:nth-child(3)    
      width 1.25rem
      top .625rem
      
    &:nth-child(4)    
      left 0
      transform-origin bottom left
      
    &:nth-child(5)    
      left 0
      transform-origin top left
View Compiled
$('.arrow').on('click', function() {
    $(this).toggleClass('active');
});

$('.arrow--l-r').on('click', function() {
    $(this).toggleClass('left right');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js