htmlcssskew

Imperfect pixel when using CSS skew


enter image description here <-- see image with imperfect pixel here.

enter image description here

When using skew in CSS I get a imperfect pixel where the skewed grey border meets the grey bottom border. Looks like some sort of outline or box-shadow. But using outline:0;box-shadow:0; does not effect it. Does anyone know how I can solve this? Cheers and thanks in advance! ✌️

Edit, relevant code: https://jsfiddle.net/acnodrfe/


Solution

  • The blue background color of that element was causing this. The grey border did get a little bit of blue from the bg with it. Changing the background with: background: linear-gradient(270deg, #0b19ba 0%, #0b19ba 99%, #cccccc 100%); solved the problem. Because it gives the edge close to that border a grey value.

    PS: This was only possible because I have the light blue element on top of it so you don't see the gradient. Be aware of that if someone might need and find this later on in time. 🚀