14

我只是想歪曲父母并将其歪回到孩子身上。

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

火狐：

火狐

铬合金 ：

铬合金

火狐与铬：

火狐VSChrome

或由 Photoshop 放大

火狐VSChromeZoomed

现场示例：http: //jsfiddle.net/1tpj1kka/

任何想法 ？

笔记 ！！！: web-tiki 的回答是另一种解决问题的方法。但是，如果有人回答了解决这个歪斜问题的真正解决方案（真正的解决方案），我会接受这个答案。

4

3 回答 3

8

使用 webkit 浏览器进行 2d 或 3d 转换后的“模糊文本”已被多次讨论。但在您的情况下，您只能将转换应用于伪元素，以便您的文本不受 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>

于 2014-12-16T09:53:24.810 回答
2

在像下面这样的转换之前添加“translateZ(0)”会强制 gpu 重新渲染文本并消除 Chrome 上的模糊性。

这个：

transform:  translateZ(0) skew(-10deg);

不是这个：

transform: skew(-10deg);
于 2016-01-09T04:48:26.027 回答
1

你可以试试text-rendering: geometricPrecisionCSS 属性。这将强制您的文本不进行抗锯齿处理，从而使模糊不那么重要。

inp.onchange = function(){
   document.querySelector('.child').classList.toggle('geo');
  }
@import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight:bold;font-size:50px;font-family:'Oswald',sans-serif;}

.geo{
    text-rendering: geometricPrecision;
  }
.parent {

  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;  
  width:300px;padding-left:15%;margin-left:-15%;overflow:hidden;
}

.child {
  transform: skew(10deg);  
  width:300px;background: rgba(90, 190, 230, 0.9);padding-left: 5%;padding-right: 15%;
}
<div class="parent"> <!-- skew(-10deg) -->
    <div class="child geo">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
<input type="checkbox" id="inp" checked="true"/> geometricPrecision

于 2016-12-12T13:07:33.110 回答