CSS - Blurry Text/Image - Transform:skew
<p>I get blurry text and image on my website because of:  </p>

<pre><code>transform:skew(0.25rad)
</code></pre>

<p>Here is my html:</p>

<pre><code>&lt;div class="one"&gt;
    &lt;h3&gt;TITLE&lt;/h3&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my CSS:</p>

<pre><code>.one{
    background:#323232;
    box-sizing:border-box;
    transform: skew(-0.25rad);
    padding:3px 20px;
    border-radius:4px;
    margin:0 -7px;
}
.one h3{
    box-sizing:border-box;
    transform:skew(0.25rad);
    color:#ffc70e;
    font-size:20px;
    letter-spacing:0.8px;
}
</code></pre>