Monthly Archives: June 2014

CSS shapes – create an Arrow

As always I get inspiration from the great CSS source CSS tricks,
this time in CSS shapes specifically by playing around on Chevron shape created by Anthony Ticknor.
I thought we could do frequently used arrows in CSS as shapes instead of PNG images.

here is an image of how the result will look

css-shapes-arrows

the html code

<span id="arrow-left"></span>
<span id="arrow-right"></span>

the CSS code

#arrow-left{
  position: relative;
  padding: 30px;
}
 
#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}​
 
#arrow-right{
  position: relative;
  padding: 30px;
}
 
#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}

the size can be controlled by changing the padding on the same element selector.

The width of the arrow can be controlled by changing the width value on :before and :after selectors, but you have to change also the right value on :after selector to the complement of previous value to 100 (ex: if you change the width to 30% then you have to change the right value to 70%)

here is a demo
http://cssdesk.com/a2b9G
http://cssdesk.com/67uSH