Question

我正在尝试按-25度制作过渡材料，但我想要的只是传输“盒子”，而不是字体。我不明白的是如何使用：之前/之后。每当我尝试通过CSS做它时，它基本上忽略了我为特定容器做的所有设置。

.option:hover
{
font-style: normal !important;
background-color: green;
cursor: pointer;
box-sizing: border-box;
transition-property: background;
transition-duration: .4s;
left: 0;
top: 0;
-webkit-transform: skew(-25deg);
}

http://jsfiddle.net/3fndahd2/

Answer 1

事情是你扭曲整个div，其中包括任何内部。没有办法排除任何东西。

有两种解决方法：

将相反的歪斜应用于内部元素，即为文本添加另一个容器，该容器反向倾斜以便再次直线。我不会这样做，因为它可能导致模糊的结果或文物。
使用CSS3伪元素：使用::before创建一个元素，给它完整的父级大小并使这个元素倾斜。它在您的文本之外，因此不受转换的影响。此外，使用z-index将其放在父div之后。 JSFiddle

从转换继承的字体

1 个答案: