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');
});
This Pen doesn't use any external CSS resources.