Pure CSS Arrows

Saturday 08th, Sep, 2018 | #Pure CSS #HTML 5


Curated Collection of free HTML and CSS arrow  source code examples: css arrow shape, triangle, line, buttons, animated

CSS Triangle Shapes

We can create simple triangular shapes with css using its border property

#triangle_up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
#triangle_down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
#triangle_left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }
#triangle_right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

 

 

 

CSS Arrow with mouse hover effect


<a class="arrow arrow-left" title="Previous" href="javascript:;"></a>
<a class="arrow arrow-right" title="Next" href="javascript:;"></a>
  

  .arrow {
    position: absolute;
    padding: 3rem; /* Arrow size */
    box-shadow: 1px -1px 0 1px plum inset;
    -webkit-box-shadow: 2px -2px plum inset;
    border: solid transparent;
    border-width: 0 0 2rem 2rem;
    transition: 0.2s;
    }
 .arrow:hover {
    box-shadow: 2px -2px 0 2px orchid inset;
    -webkit-box-shadow: 4px -4px orchid inset;
    }
    .arrow { top:50%;margin:-67px 0 0 -67px;left:35% }
    a:nth-child(2) { left:65% }
    .arrow-up    { transform:rotate(135deg) }
    .arrow-right { transform:rotate(225deg) }
    .arrow-down  { transform:rotate(-45deg) }
    .arrow-left  { transform:rotate(45deg) }
    
      

Up, Left, Top, Down Red CSS Arrow Line


<div class="demo">
<a class="arr arr-up"></a>
<a class="arr arr-down"></a>
<a class="arr arr-prev"></a>
<a class="arr arr-next"></a>
</div>

 .arr {
background: #ff0000;
display: block;
float: left;
}
.arr-up {
width: 50px;
height: 50px;
margin: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.arr-up:after {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 50px;
height: 50px;
background: #fff;
}
.arr-down {
width: 50px;
height: 50px;
margin: 25px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.arr-down:after {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 50px;
height: 50px;
background: #fff;
}
.arr-prev {
width: 50px;
height: 50px;
margin: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
-o-transform: rotate(135deg);
}
.arr-prev:after {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 50px;
height: 50px;
background: #fff;
}
.arr-next {
width: 50px;
height: 50px;
margin: 25px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
-o-transform: rotate(315deg);
}
.arr-next:after {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 50px;
height: 50px;
background: #fff;
}
.demo {
margin: 100px auto;
width: 400px;
}

Fixed Buttom CSS arrow down bouncing


<div class="encircle bounce animated">
<div class="arrow">
</div>
</div>

 @-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
body {
background: black;
}

.encircle {
width: 60px;
height: 60px;
border-radius: 60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}

.arrow {
margin: 0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}

.bounce {
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}

Multiple CSS arrow shapes as ICONS


<span class="arrow4  arrow-bar is-top"></span>
<span class="arrow4 arrow-bar is-right"></span>
<span class="arrow4 arrow-bar is-bottom"></span>
<span class="arrow4 arrow-bar is-left"></span>
<span class="arrow4 is-top"></span>
<span class="arrow4 is-right"></span>
<span class="arrow4 is-bottom"></span>
<span class="arrow4 is-left"></span>
<span class="arrow4 is-triangle arrow-bar is-top"></span>
<span class="arrow4 is-triangle arrow-bar is-right"></span>
<span class="arrow4 is-triangle arrow-bar is-bottom"></span>
<span class="arrow4 is-triangle arrow-bar is-left"></span>
<span class="arrow4 is-triangle is-top"></span>
<span class="arrow4 is-triangle is-right"></span>
<span class="arrow4 is-triangle is-bottom"></span>
<span class="arrow4 is-triangle is-left"></span>
<span class="arrow4 is-check is-bottom"></span>

.arrow4 {
margin: 25px;
display: inline-block;
height: 12px;
position: relative;
width: 12px;
}
.arrow4::after {
border-bottom-style: solid;
border-bottom-width: 2px;
border-right-style: solid;
border-right-width: 2px;
content: '';
display: inline-block;
height: 12px;
left: 0;
position: absolute;
top: 0;
width: 12px;
}
.arrow4.is-triangle::after {
border-style: solid;
border-width: 0 0 12px 12px;
height: 0;
width: 0;
}
.arrow4.is-check::after {
width: 6px;
}
.arrow4.arrow4-bar::before {
bottom: 1px;
content: '';
height: 20px;
position: absolute;
right: 0;
transform-origin: bottom;
width: 2px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow4.is-top {
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrow4.is-right {
-moz-transform: rotate(315deg);
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.arrow4.is-bottom {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow4.is-left {
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.arrow4::after,
.arrow4 .arrow4::after {
border-color: red;
}
.arrow4.is-triangle::after,
.arrow4 .arrow4.is-triangle::after {
border-color: transparent;
border-bottom-color: red;
}
.arrow4::before,
.arrow4 .arrow4::before {
background-color: red;
}