现代 CSS

CSS秘密花园:平行四边形

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

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-blockblock,否则应用的变换不会生效。内部元素也一样。

正如下图的效果:

平行四边形

如如你看到,它运行没有问题,但是我们使用了一个额外的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()变换,可以很容易地生成一个钻石( 菱形)形状。

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

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-secrets/parallelograms.htmlnike air max 1 custom

返回顶部