79081499

Date: 2024-10-12 17:07:35
Score: 0.5
Natty:
Report link

Yes, the ::after pseudo-element assumes the triangle will start exactly at the right edge of the parent .arrow element. But due to subpixel rounding, the browser may interpret the position as slightly off (e.g., -60.5px instead of exactly -60px). When you use pixel values that don't align perfectly with the display's pixel grid, some browsers might round differently, creating small gaps or seams between elements.

One solution might be css-shape.com/arrow that was posted by @Temani Afif in the comments. One other might be to use calc to have better rounding.Something like: right: calc(-1 * 30px);

Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • User mentioned (1): @Temani
  • Low reputation (0.5):
Posted by: sevic