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

Question

我只是想歪斜 parent ，然后歪斜 child 。

示例:HTML

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>

示例:CSS

.parent {
    transform: skew(-10deg);
}
.child {
    transform: skew(10deg);
}

里面的文本在 Firefox、Safari 上似乎没问题。但不是 Chrome 和 Opera 它有点模糊

我必须使用 -webkit-backface-visibility: hidden; 来减少 Chrome 中的像素化框

火狐:

Chrome :

Firefox 与 Chrome:

或通过 Photoshop 缩放

实例: http://jsfiddle.net/1tpj1kka/

有什么想法吗？

---

注意!!! : web-tiki 的回答是另一种解决问题的方法。但是，如果有人回答了解决这个偏斜问题的真正解决方案(真正的修复)，我会接受这个答案。

Answer 1

使用 webkit 浏览器进行 2d 或 3d 转换后的“模糊文本”已 discused many times .但在您的情况下，您只能在伪元素上应用转换，这样您的文本就不会受到 skew 属性的影响。

它还允许您在标记中只使用一个标签:

@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>