Sharp edges on rotated div

Hello,

Does anyone know why this rotated horizontal div with photos has these weird sharp edges? It works fine on desktop.


Here is my public share link: LINK
My live site: LINK

Anyone? I’ll be very helpful for your advice!

hi @Justyna_Sieczka this JAGGED effect or “steps” effect is caused by rotation. You have to keep in mind that everything is pixel-based (pixel is a small square or rectangle), this means when you rotate any element the browser has to compensate for this shift (recalculate pixels) and the result of a rendered element is the jagged effect.

That said Safari, Chrome, Brave, Edge compensate (minimise) this jagged effect automatically but still it is visible. Worst is Firefox where this effect is not automatically compensated BUT you can minimise it by adding to your image border: 2px solid transparent. There are other methods like blur inset of :before but the method I have mentioned will do the job and if you will have time you can find more about the jagged effect on the internet as there are many sources of how to

Thank you, Stan. Sounds good! I’ll check on it.