html - Chrome错误:倾斜的元素看起来像像素化

我有一个倾斜的HTML块（我使用引导程序），如下所示：

.skewed {
  -webkit-transform: skew(0, -3.279deg);
  -moz-transform: skew(0, -3.279deg);
  -o-transform: skew(0, -3.279deg);
  transform: skew(0, -3.279deg);
  -ms-transform: skew(0, -3.279deg);
}

正如我注意到的那样，在Chrome中它看起来像是像素化的，所以我在-webkit-backface-visibility: hidden类中添加了.skewed。现在问题已经解决了-它不再像素化了。

但是随后出现了另一个重要问题：此块中的文本模糊且丑陋...

请看一下JS Fiddle。

最佳答案

旧问题，但也许这可以帮助那些偶然看到此问题的人解决此问题，只需添加背面可见性即可：到最后，请参见示例

.bar {
    background: red;
    color: #F5DDBB;
    box-shadow: 0 2px 5px #aaa;
    padding-top: 45px;
    padding-bottom: 45px;
    -webkit-transform: skew(0, -3.279deg);
    -moz-transform: skew(0, -3.279deg);
    -o-transform: skew(0, -3.279deg);
    transform: skew(0, -3.279deg);
    -ms-transform: skew(0, -3.279deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: initial;
}

.bar .row {
     -webkit-transform: skew(0, 3.279deg);
    -moz-transform: skew(0, 3.279deg);
    -ms-transform: skew(0, 3.279deg);
    -o-transform: skew(0, 3.279deg);
    transform: skew(0, 3.279deg);
}

<div class="container-fluid bar">
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center">Welcome to the website</h2>
            <br/>
            <p class="text-center">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap.
            </p>
        </div>
    </div>
</div>