css triangles

HTML

<div class="tt" style="width:0;height:0;border-style:solid;border-width:0 100px 100px 100px;border-color:transparent transparent #007bff transparent;"></div>
<div class="td" style="width:0;height:0;border-style:solid;border-width:100px 100px 0 100px;border-color: #007bff transparent transparent transparent;"></div>
<div class="tl" style="width:0;height:0;border-style:solid;border-width:50px 200px 50px 0;border-color:transparent #007bff transparent transparent;"></div>
<div class="tr" style="width:0;height:0;border-style:solid;border-width: 50px 0 50px 200px;border-color: transparent transparent transparent #007bff;"></div>

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;
    
}