Rounded Triangle CSS Image Mask

This Rounded Triangle CSS Image Mask offers a mathematically perfect way to shape visuals into equilateral triangles with soft, professional edges. It is an ideal choice for high-end portfolio galleries, creative team sections, or landing pages where standard rectangular or circular crops feel too conventional. By leveraging modern CSS math, the shape remains perfectly symmetrical regardless of the image dimensions.

Core Technique

The logic behind this snippet is a sophisticated blend of clip-path and complex mask-image layering. While the clip-path defines the basic triangular polygon, the rounding effect is achieved through a multi-layer mask consisting of conic-gradient for the main area and radial-gradient for the vertices. To ensure the triangle is always equilateral, the code uses the trigonometric function cos(30deg) to calculate a precise aspect-ratio. This approach is far more flexible than using a fixed SVG because it allows for dynamic adjustment of the corner radius via a single CSS variable, recalculating the gradient positions on the fly.

Customization

The component is highly modular, primarily driven by the --r variable which controls the roundness. You can easily adjust the size and the overlapping effect by changing the width and margins.

.tri {
  /* Corner radius: increase for more "blob-like" look, 
     decrease for sharper edges. */
  --r: 40px; 
  
  /* Width of the element */
  width: 300px;
  
  /* Modern trig ensures equilateral proportions 
     Math: 1 / 0.866... */
  aspect-ratio: 1/cos(30deg);
}

Tips

1. Radius Constraints: The radius defined in --r should ideally not exceed (width / 4 * tan(60deg)). If you exceed this limit, the gradients inside the mask will overlap incorrectly, causing visual artifacts or a flat-topped appearance.

2. Fallback for Older Browsers: Trigonometric functions like cos() and tan() are supported in modern browsers (2023+). For older versions, provide a manual aspect-ratio fallback:

.tri {
  aspect-ratio: 0.866; /* Fallback for 1/cos(30deg) */
  aspect-ratio: 1/cos(30deg); /* Modern standard */
}