<div class="triangle"></div>

/* 上向き */
.triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #225fb3;
}
/* 右向き */
.triangle{
width: 0;
height: 0;
border-left: 30px solid #b32222;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
/* 左向き */
.triangle{
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid #22b3b1;
border-bottom: 30px solid transparent;
}
/* 下向き */
.triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #ff8a00;
}