Page 89 - css揭秘

但是，这导致它的内容也发生了斜向变形，这很不好看，而且难读（参
见图 3-14）。有没有办法只让容器的形状倾斜，而保持其内容不变呢？
图 3-14
按钮进行斜向变形之后，它的文 嵌套元素方案
字就很难读了
我们可以对内容再应用一次反向的 skew() 变形，从而抵消容器的变形
!
如果你想把这个效果应用到 效果，最终产生我们所期望的结果。不幸的是，这意味着我们将不得不使用
一个默认显示为行内的元素，不 一层额外的 HTML 元素来包裹内容，比如用一个 div：
要忘记把它的 display 属性设置
为其 他值， 比如 inline-block <a href="#yolo" class="button"> HTML
或 block，否则变形是不会生效 <div>Click me</div>
的。这一点对它内层的元素也是 </a>
适用的。
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

图 3-15 我们在图 3-15 中可以看到，这个方法的表现很不错，但它也意味着我
最终效果 们不得不添加额外的 HTML 元素。如果结构层的变更是不允许的，或者你
希望严格保持结构层的纯净度，别担心，我们还有一个纯 CSS 的解决方案。

试一试 play.csssecrets.io/parallelograms

伪元素方案

另一种思路是把所有样式（背景、边框等）应用到伪元素上，然后再对
伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不
会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。
我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，
甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是
给宿主元素应用 position: relative 样式，并为伪元素设置 position:
absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都
被拉伸至宿主元素的尺寸。代码看起来是这样的：

.button {
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
图 3-16 }
伪元素目前在内容之上，因此对
伪元素应用 background: #58a 此时，用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，
会把内容完全盖住 就会遮住内容（参见图 3-16）。为了修复这个问题，我们可以给伪元素设置

58 第 3 章 形状

඀ࠡ JOEC