CSS Tip

Arrow-like Box with rounded corners

Another experimentation using the new shape() function to add rounded corners to a box with a triangular shape.

A CSS-only arrow-like rectangle

A complex-looking code but all you have to do is to update a few variables.

.box {
  --h: 200px; /* element height */
  --s: 90px;  /* triangle size */
  --r: 10px;  /* radius */
  
  height: var(--h);
  border-radius: var(--r) 0 0 var(--r);
  --_a: atan2(var(--s),var(--h)/2);
  clip-path: 
   shape(from 0 0,
    line  to calc(100% - var(--s) - var(--r)) 0,
    curve to calc(100% - var(--s) + var(--r)*sin(var(--_a))) 
             calc(var(--r)*cos(var(--_a)))
    with calc(100% - var(--s)) 0,
    line  to calc(100% - var(--r)*sin(var(--_a))) 
             calc(50%  - var(--r)*cos(var(--_a))),
    curve to calc(100% - var(--r)*sin(var(--_a)))
             calc(50%  + var(--r)*cos(var(--_a))) 
    with 100% 50%,
    line  to calc(100% - var(--s) + var(--r)*sin(var(--_a))) 
             calc(100% - var(--r)*cos(var(--_a))),
    curve to calc(100% - var(--s) - var(--r)) 100%
    with calc(100% - var(--s)) 100%,
    line to 0 100%
   );
}

See the Pen Rounded Triangle Boxes by Temani Afif (@t_afif) on CodePen.

More CSS Tips