Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)

css google-chrome css-transforms skew

The "blurry text" after 2d or 3d transforms with webkit browsers has been discused many times. But in your case, you can apply the transform only on a pseudo element so that your text isn't affected by the skew property.

It will also alow you to use only one tag in your markup :

@import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}.parent {    width: 300px;    overflow: hidden;    padding-left: 5%;    position:relative;}.parent::before {    content :'';    position:absolute;    top:0;left:0;    width:100%; height:100%;    background: rgba(90,190,230,0.9);    transform-origin:0 0;    transform:skew(-10deg);    z-index:-1;}

<div class="parent">    Hello</div>

Expand snippet