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

我只想偏向父级，然后偏向子级。

示例: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中像素化的框

Firefox:



Chrome:



Firefox和Chrome:



或通过Photoshop缩放



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

任何想法 ？

注意!!! :web-tiki的答案是防止该问题的另一种方法。但是，如果有人回答了解决该偏斜问题的真正解决方案(实际解决方案)，我将接受答案。

最佳答案

使用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>