css triangles

by iamanubhavsaini

HTML

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

CSS

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    margin:20px auto;
}

.triangle-down {
    border-bottom:none;
    border-top: 100px solid red;
}

.triangle-left {
    border-left:none;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

.triangle-right {
    border-right:none;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    border-top: 50px solid transparent;
}

.triangle-after:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;
    margin:0 5px;
    content:"";
    display:inline-block;
}

.triangle-after-right:after {
    border-right:none;
    border-left: 5px solid blue;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    
}

.triangle-before:before {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid blue;
    margin:0 5px;
    content:"";
    display:inline-block;
}

.triangle-before-left:before {
    border-left:none;
    border-right: 5px solid blue;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    
}