1

Say I want to render this picture with no anti-aliasing using HTML elements:

square

I thought of making a square div, and then rotate it 45 degrees. But doing so will smooth out the edges, like this:

smoothSquare

I managed to bypass this only on Firefox by using transform: translateZ(1px) rotate(45deg);, but I'd like to do the same on Webkit.

How I made the square

Yonic
  • 325
  • 3
  • 14
  • Would be great to see how you're doing the whole square in code. For example, if you're using boarders or outline, you might be cropping slightly, vs using :before and :after to make child squares. – MattJHoughton Mar 26 '18 at 20:23
  • Sure, I just edited the question with the link to a demo. – Yonic Mar 26 '18 at 20:50
  • Ahh yeah. Few ideas on here: https://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome – MattJHoughton Mar 26 '18 at 20:57

0 Answers0