Question

我做了一个小提琴：

http://jsfiddle.net/89x4d/

我试图维持倾斜的div，但保持p文字笔直。

这可能吗？

由于

Answer 1

你应该在P上使用20deg而不是0deg来补偿DIV变换（因为结果是变换的组合。）

Answer 2

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

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

Demo

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/

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

马丁

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

总是过度思考！

Answer 5

正如其他人所指出的那样，扭转skew的{{1}}会导致一些不良后果。

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

作为替代方案，使用skew选择器在文本后面添加倾斜元素。

<强> HTML

:before

<强> CSS

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

和demo。

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

5 个答案: