How to make a triangle in CSS

You can create a triangle in CSS by making an element with zero width and height and using asymmetric borders — for example, setting transparent left/right borders and a colored top (or bottom) border produces a triangle pointing up (or down). Another common approach is clip-path: polygon(...), which gives precise control over shape and orientation, or using a pseudo-element (::before/::after) so the triangle doesn’t affect layout. These techniques are lightweight and useful for arrows, pointers, and decorative accents; choose clip-path for complex shapes and border-based triangles for simple, performant indicators.