css - 使用 CSS 重置倾斜 div 中文本的角度

Question

我做了一个小提琴：

http://jsfiddle.net/89x4d/

我试图保持倾斜的 div 但保持 p 文本笔直。

这可能吗？

谢谢

Answer 1

您应该使用20deg代替0degP 来补偿 DIV 变换（因为结果是变换的组合。）

Answer 2

为了消除偏斜的影响，你必须给出正的变换值。

p {
   -webkit-transform: skew(20deg) !important;
   -moz-transform: skew(20deg) !important;
   -o-transform: skew(20deg) !important;
   transform: skew(20deg) !important;
}

演示

Answer 3

div {
    width: 200px;
    height:50px;
        background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
    transform: skew(-20deg);
    margin: 20px;
    
    padding:0 25px;
}
p {
   -webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
    transform: skew(20deg) !important; 
}

<div>
<p>hey i'm straight, ok?</p>
</div>

嘿，我是直的，好吗？

Answer 4

我不确定你是否可以让它向后倾斜，似乎字体扭曲太多。

skew(20) 是我能得到的最接近的，但你可以设置 2 个 div，1 个用于倾斜框，另一个用于移动它。

http://jsfiddle.net/gP9ne/3/

在那里设置一个小提琴供您查看

马丁

编辑：实际上看起来没有任何不同：pi 认为它只是红色的黑色，字体不喜欢我的屏幕：p

总是想太多！

Answer 5

正如其他人指出的那样，逆转skew可能<p>会导致一些不良结果。

它也不是超级可重用的，因为对于每个新skew角度，您都需要相应的 CSS 选择器/声明来反转内部内容。

作为替代方案，使用:before选择器将倾斜的元素添加到文本后面。

HTML

<div>
  <p>hey i'm straight, ok?</p>
</div>

CSS

div {
  width: 200px;
  height:50px;
  margin: 20px;
  position:relative;
}

div:before {
  content: "";
  display:block;
  background: red;
  position:absolute;
  width:100%;
  height:100%;
  z-index:-1;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

和一个演示。