歪斜的文字在Chrome中变得模糊

Question

我在产品的快速视图中有一个倾斜的弹出窗口和文本。但它在chrome中无法正确呈现。我尝试翻译3d（0,0,0）并将skew deg从奇数更改为偶数但它没有解决我的问题。 有人可以帮我这个。

Answer 1

模糊是一个小问题，同时倾斜使物品看起来更光滑。如果你真的需要使模糊消失，只需将背景div倾斜并保持前景div不受影响。

.background {
  width: 300px;
  height: 100px;
  background: lightgrey;
  position: absolute;
  top: 60px;
  -webkit-transform: skewY(-5deg);
}
.foreground {
  width: 280px;
  height: 100px;
  position: absolute;
  top: 60px;
  padding: 10px;
  text-align: center;
}
.dialog {
  width: 300px;
  margin: 0 auto;
}

<div class="dialog">
  <div class="background">
  </div>
  <div class="foreground">
    <p>Here goes some foreground text.</p>
  </div>

</div>