Carets of All Sizes

by tomprogramming

HTML

<div>
    <span class="arrow arrow-n small"></span>
    <span class="arrow arrow-ne small"></span>
    <span class="arrow arrow-e small"></span>
    <span class="arrow arrow-se small"></span>
    <span class="arrow arrow-s small"></span>
    <span class="arrow arrow-sw small"></span>
    <span class="arrow arrow-w small"></span>
    <span class="arrow arrow-nw small"></span>
</div>
<div>
    <span class="arrow arrow-n"></span>
    <span class="arrow arrow-ne"></span>
    <span class="arrow arrow-e"></span>
    <span class="arrow arrow-se"></span>
    <span class="arrow arrow-s"></span>
    <span class="arrow arrow-sw"></span>
    <span class="arrow arrow-w"></span>
    <span class="arrow arrow-nw"></span>
</div>


<div>
    <span class="arrow arrow-n large"></span>
    <span class="arrow arrow-ne large"></span>
    <span class="arrow arrow-e large"></span>
    <span class="arrow arrow-se large"></span>
    <span class="arrow arrow-s large"></span>
    <span class="arrow arrow-sw large"></span>
    <span class="arrow arrow-w large"></span>
    <span class="arrow arrow-nw large"></span>
</div>

<div>
    <span class="arrow arrow-n xlarge"></span>
    <span class="arrow arrow-ne xlarge"></span>
    <span class="arrow arrow-e xlarge"></span>
    <span class="arrow arrow-se xlarge"></span>
    <span class="arrow arrow-s xlarge"></span>
    <span class="arrow arrow-sw xlarge"></span>
    <span class="arrow arrow-w xlarge"></span>
    <span class="arrow arrow-nw xlarge"></span>
</div>

CSS

.arrow {
width:0;
 height:0;
margin:0;
 padding:0;
display:inline-block;    
}
.arrow.arrow-n{
    border-bottom: 4px solid #000;
    border-right:4px solid transparent;
    border-left: 4px solid transparent
}
.arrow.arrow-e{
    border-left: 4px solid #000;
    border-top:4px solid transparent;
    border-bottom: 4px solid transparent
}
.arrow.arrow-s{
    border-top: 4px solid #000;
    border-right:4px solid transparent;
    border-left: 4px solid transparent
}
.arrow.arrow-w{
    border-right: 4px solid #000;
    border-top:4px solid transparent;
    border-bottom: 4px solid transparent
}
.arrow.arrow-ne{
    border-left: 6px solid #000;
    border-bottom: 6px solid transparent;
}
.arrow.arrow-nw{
    border-right: 6px solid #000;
    border-bottom: 6px solid transparent;
}
.arrow.arrow-se{
    border-left: 6px solid #000;
    border-top: 6px solid transparent;
}
.arrow.arrow-sw{
    border-right: 6px solid #000;
    border-top: 6px solid transparent;
}

.arrow.large {
    border-width:8px;    
}
.arrow-ne.large,.arrow-se.large,.arrow-nw.large,.arrow-sw.large{
    border-width:12px;        
}

.arrow.xlarge {
    border-width:16px;    
}
.arrow-ne.xlarge,.arrow-se.xlarge,.arrow-nw.xlarge,.arrow-sw.xlarge{
    border-width:20px;        
}

.arrow.small {
    border-width:2px;    
}
.arrow-ne.small ,.arrow-se.small ,.arrow-nw.small ,.arrow-sw.small {
    border-width:3px;        
}