I just want to skew the parent and skew it back on the child.
Example : HTML
<div class="parent"> <!-- skew(-10deg) -->
<div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
Example : CSS
.parent {
transform: skew(-10deg);
}
.child {
transform: skew(10deg);
}
Text inside seems ok with Firefox, Safari. But not Chrome and Opera its a bit blurry
I have to use -webkit-backface-visibility: hidden;
for reduce box pixelated in Chrome
Firefox :
Chrome :
Firefox vs Chrome :
or zoomed by Photoshop
Live example : http://jsfiddle.net/1tpj1kka/
Any idea ?
NOTE !!! : web-tiki's answer is an another way solution to prevent the problem. But if any answered a real solution to resolved this skew back problem (real fix), I will accept the answer.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With