CSS秘密花园：平行四边形

《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。

CSS Secrets

问题

平行四边形是矩形的一个超集：它的边是平行的，但是角不一定是直角。

平行四边形

图注:一个平行四边形

在视觉设计，它们往往可以使设计显得更具活力，传达运动感。

平行四边形

图注：eb设计中的平行四边形（design by Martina Pitakova）

我们尝试用CSS创建按钮样式的链接。从普通的扁平按钮开始，带一些简单的样式，如图下图所示:

平行四边形

然后，我们应用skew()变换创建出倾斜的矩形，如下：

transform: skewX(-45deg);

但是，这也会导致平行四边形中的内容被倾斜，这使得它看起来很丑而且没有可读性。

平行四边形

图注：倾斜后的按钮，文本变得难以阅读

有什么办法可以只倾斜外边的形状容器，而不倾斜里边的内容吗？

嵌套元素的解决方案

我们可以给内容应用一个相反的skew()变换，把外边的变换抵消，这样就可以得到我们想要的结果。但是，这也意味着我们必须使用额外的HTML元素来包裹内容，如一个div：

<a href="#yolo" class="button">
    <div>Click me</div>
</a>

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

 

如果你是给默认内联的元素应用这个效果，记得把它的display属性设置为inline-block或block，否则应用的变换不会生效。内部元素也一样。

正如下图的效果：

平行四边形

如如你看到，它运行没有问题，但是我们使用了一个额外的HTML元素。如果修改标签不是一个可选的方案，或者你真的希望保持标签纯度，别担心，这里还有一个纯CSS的解决方案。

伪元素解决方案

另一个方案是把所有的样式应用在伪元素上（背景、边框等等），然后为其应用变换。因为我们的内容不是被包裹在伪元素中的，它不会被变换影响。我们尝试使用这种技术给一个链接添加样式，跟前一节一样的方法。

我们需要让伪元素保持灵活性，并自动继承父元素的尺寸，即使它们的大小由内容决定。一个简单的方法时是父元素应用position: relative，然后给生成的元素应用position: absolute，然后把所有的偏移量都设置为0，这样它的水平和垂直方向都会继承父元素的大小。代码如下：

.button {
    position: relative;
    /* text color, paddings, etc. */
}
.button::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

 

此时，生成的盒子是悬浮在内容上边的，一旦给它应用了背景，它将会覆盖住内容:

平行四边形

图注：我们的伪元素当前是悬浮在内容上边的，所以应用background: #58a来覆盖

我们可以给伪元素应用一个z-index: -1，这样它就会移动到父元素下方了。

现在，终于可以给我们的主要元素应用变换，然后查看结果了。最后的代码如下，生成的效果和前面的方案生成的效果完全一样：

.button {
    position: relative;
    /* text color, paddings, etc. */
}
.button::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

 

这些技术不仅对skew()变换有效。它们还可以结合其它变换使用，这样既可以改变元素的形状，但又不会对它的内容造成影响。例如，给一个方形元素使用rotate()变换，可以很容易地生成一个钻石（ 菱形）形状。

还有，使用伪元素和定位来生成一个盒子，并添加样式，然后放置在父元素之下的方法，在很多其它的不同类型的效果实例中都可以使用，如：

posted on 2020-03-31 13:10  漫思  阅读(336)  评论(0)  编辑  收藏  举报

导航