CSS Triangle Reloaded

360° Trick

by ian_smithz

HTML

<span class="triangle"></span>

<span class="triangle reloaded"></span>

CSS

body {
    padding: 30px;
}

.triangle {
    display: block;
    margin: 0 0 20px 0;
    width: 0;
    height: 0;
    border-bottom: 30px solid #008dcd;
    border-left: 85px solid transparent;
    border-right: 85px solid transparent;
    
}

.reloaded {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}