Last updated
CSS Triangles with Borders
CSS triangles are created using the border trick: an element with zero width and height, where only one border side is colored and the others are transparent. The colored border forms a triangle shape. This technique works because CSS borders meet at 45° angles at the corners of an element.
Triangle Directions
CSS
/* Triangle pointing up */
.triangle-up {
width: 0; height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #3498DB;
}
/* Triangle pointing right */
.triangle-right {
width: 0; height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 40px solid #E74C3C;
}
/* Triangle pointing down */
.triangle-down {
width: 0; height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #2ECC71;
}
/* Triangle pointing left */
.triangle-left {
width: 0; height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 40px solid #F1C40F;
}Modern Alternative: clip-path
CSS
/* Triangle using clip-path (more flexible) */
.triangle-clip {
width: 80px;
height: 80px;
background: #9B59B6;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* Right-pointing arrow */
.arrow-right {
width: 80px;
height: 60px;
background: #1ABC9C;
clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
}