Question

有没有办法转换元素而不是该元素中的文本？

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

div {
  background: #fff;
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
   -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}

（代码 - http://cssdesk.com/H7Awc）

我有几种方法，包括在其中添加before伪类，这在理论上有效，但我将此导航添加到wordpress网站，而且a不能有位置：绝对。这是使用before伪的代码，这是我需要它看起来但没有绝对的

http://cssdesk.com/ALRrQ

任何帮助将不胜感激，谢谢。

Answer 1

正如我所见，您尝试通过向该范围添加skew(20deg)来重置文本的倾斜度。但transform不适用于内联元素，因为span是。

<强>解决方案

span {
    display:inline-block; /*important line*/
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
}

请参阅Fiddle

Answer 2

您只能使用负值为文本添加相同的偏斜。

所以div会偏斜（-20deg）; 并且其中的文本将是倾斜的（20deg）;

添加变换：仅倾斜到容器，而不是文本

2 个答案: