CSS can be used to create next and back arrows.
For a simple html website I wished to add left and right arrows on a sequence of images.
You know, those arrows to the left and right of a series of images or other sequence.
I considered using images or Glyphicons or perhaps Bootstrap but thought I’d explore the idea of using CSS.
Considering the look of the arrow. In their basic form they are simply two lines at an angle. Meaning that they can be created using two borders of a square and then rotated.
To add the two arrows we’ll put them in a div and position the arrow links at the far left and right.
<div class="sl4_container "> <a href="#" class="nav-prev arrow left" onclick="navPrev();return false;"></a> <a href="#" class="nav-next arrow right" onclick="navNext();return false;"></a> </div>
Now to consider the CSS.
To begin with the positioning of the arrows.
The outer div requires the relative value set for its position, so the two arrows can be given values which are absolute with respect to this div. I’ve also given it a position approximately half way down and a high z-index to show above the content below.
<style>
.sl4_container{
position:relative;
top: 48%;
z-index:9999;
}
</style>
For the arrow divs themselves we add their references to position them to the left and right.
.arrow
{
position: absolute;
top: 48%;
z-index:9999;
}
.arrow.left
{
left: 20px;
}
.arrow.right
{
right: 20px;
}
.nav-prev,.nav-next
{
position:fixed;
top:48%;
}
Next step is to add the borders on two sides of each arrow link.
.arrow
{
width: 2rem;
height: 2rem;
background: transparent;
border-top: .2rem solid #fff;
border-right: .2rem solid #fff;
}
The two dics are rotated, one left and one right to give the look we desire
.arrow.left
{
transform: translate3d(0,-50%,0) rotate(-135deg);
}
.arrow.right
{
transform: translate3d(0,-50%,0) rotate(45deg);
}
If you wish, you can also add additional styling such as shadows transitions and perhaps use the mix-blend-mode to ensure the arrows stand out from the background.
.arrow
{
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
mix-blend-mode: difference;
}
And finally all of the above in one block.
<div class="sl4_container ">
<a href="#" class="nav-prev arrow left" onclick="navPrev();return false;"></a>
<a href="#" class="nav-next arrow right" onclick="navNext();return false;"></a>
</div>
<style>
.sl4_container
{
position:relative;
}
.arrow
{
position: absolute;
top: 48%;z-index:9999;
width: 2rem;
height: 2rem;
background: transparent;
border-top: .2rem solid #fff;
border-right: .2rem solid #fff;
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
mix-blend-mode: difference;
}
.arrow.left
{
left: 20px;
transform: translate3d(0,-50%,0) rotate(-135deg);
}
.arrow.right
{
right: 20px;
transform: translate3d(0,-50%,0) rotate(45deg);
}
.nav-prev,.nav-next
{
position:fixed;
top:48%;
}
</style>
