Fast Forward Arrow

by HugeHugh

HTML

<div class="ff-con-big">
    <div class="right-triangle1"></div>
    <div class="right-triangle2"></div>
    <div class="right-triangle3"></div>
</div>

<div class="ff-con">
    <div class="right-triangle1"></div>
    <div class="right-triangle2"></div>
    <div class="right-triangle3"></div>
</div>

CSS

.ff-con-big {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 20px;
    vertical-align: top;
}

.ff-con {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 60px;
    vertical-align: top;
}

.ff-con-big .right-triangle1 {
   width: 0;
   height: 0;
   border-left: 60px solid black;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   position: absolute;
   left: 40px; top: 0;
}

.ff-con-big .right-triangle2 {
   width: 0;
   height: 0;
   border-left: 60px solid white;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   position: absolute;
   left: 10px; top: 0;
}

.ff-con-big .right-triangle3 {
   width: 0;
   height: 0;
   border-left: 60px solid black;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   position: absolute;
   left: 0; top: 0;
}





.ff-con .right-triangle1 {
   width: 0;
   height: 0;
   border-left: 7px solid black;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   position: absolute;
   left: 5px; top: 0;
}

.ff-con .right-triangle2 {
   width: 0;
   height: 0;
   border-left: 7px solid white;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   position: absolute;
   left: 2px; top: 0;
}

.ff-con .right-triangle3 {
   width: 0;
   height: 0;
   border-left: 7px solid black;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   position: absolute;
   left: 0; top: 0;
}