CSS实现平行四边形

CSS实现平行四边形_第1张图片

作者:晴栀Sunset
时间是生命的单位,每个人的生命容量都是有限的,只有快乐、充实、成功占的多,失落、空虚、失败占的少,生命才会变得有价值。请合理利用你的时间,把握每时每刻。

平行四边形

文章目录

  • 平行四边形
      • 背景知识
    • 难题
    • 嵌套元素方案
    • 伪元素方案
    • 总结

时间有三种步伐:未来姗姗来迟,现在象箭一样飞逝,过去永远静止不动。

背景知识

基本的 CSS 变形

难题

平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感
CSS实现平行四边形_第2张图片

让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮,辅以一些简单的样式,如图 3-13 所示。然后,我们可以通过skew() 的变形属性来对这个矩形进行斜向拉伸:
CSS实现平行四边形_第3张图片
CSS实现平行四边形_第4张图片
但是,这导致它的内容也发生了斜向变形,这很不好看,而且难读(参 见图 3-14)。有没有办法只让容器的形状倾斜,而保持其内容不变呢?

嵌套元素方案

我们可以对内容再应用一次反向的 skew() 变形,从而抵消容器的变形效果,最终产生我们所期望的结果。不幸的是,这意味着我们将不得不使用一层额外的 HTML 元素来包裹内容,比如用一个 div

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
<a href="#yolo" class="button">
 <div>Click mediv>
a>

CSS实现平行四边形_第5张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .button {
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            width: 100px;
            height: 30px;
            text-align: center;
            transform: skewX(-45deg);
        }
        
        .button>div {
            color: white;
            transform: skewX(45deg);
        }
    style>
head>

<body>
    <div href="#yolo" class="button">
        <div>Click mediv>
    div>
body>

html>

CSS实现平行四边形_第6张图片

·如果你想把这个效果应用到一个默认显示为行内的元素,不要忘记把它的 display 属性设置为其他 值, 比 如 inline-block或 block,否则变形是不会生效的。这一点对它内层的元素也是适用的


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .button {
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            width: 100px;
            height: 30px;
            text-align: center;
            transform: skewX(-45deg);
        }
        
        .button>a {
            color: white;
            transform: skewX(45deg);
        }
    style>
head>

<body>
    <div href="#yolo" class="button">
        <a>Click mea>
    div>
body>

html>

CSS实现平行四边形_第7张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .button {
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            width: 100px;
            height: 30px;
            text-align: center;
            transform: skewX(-45deg);
        }
        
        .button>a {
            display: block;
            color: white;
            transform: skewX(45deg);
        }
    style>
head>

<body>
    <div href="#yolo" class="button">
        <a>Click mea>
    div>
body>

html>

CSS实现平行四边形_第8张图片

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

伪元素方案

另一种思路是把所有样式(背景、边框等)应用到伪元素上,然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素里的,所以内容并不会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。

我们希望伪元素保持良好的灵活性,可以自动继承其宿主元素的尺寸,甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用 position: relative 样式,并为伪元素设置 position: absolute,然后再把所有偏移量设置为零,以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代码看起来是这样的:

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0; 
 }

CSS实现平行四边形_第9张图片

此时,用伪元素生成的方块是重叠在内容之上的,一旦给它设置背景,就会遮住内容(参见图 3-16)。
CSS实现平行四边形_第10张图片
为了修复这个问题,我们可以给伪元素设置z-index: -1样式,这样它的堆叠层次就会被推到宿主元素之后

现在我们要做的最后一步,就是尽情地对它设置变形样式,并享受美好的结果。最终版的代码如下所示,它产生的视觉效果跟前文所述技巧是完全一致的:

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body,
        html {
            height: 100%;
            width: 100%;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .button {
            /* background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); */
            text-align: center;
            position: relative;
            padding: 10px 20px;
            color: white;
        }
        
        .button::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            z-index: -1;
            transform: skew(45deg);
        }
    style>
head>

<body>
    <div href="#yolo" class="button">
        平行四边形

    div>
body>

html>

CSS实现平行四边形_第11张图片

总结

这个技巧不仅对 skew() 变形来说很有用,还适用于其他任何变形样式,当我们想变形一个元素而不想变形它的内容时就可以用到它。举个例子,我们把这个技巧针对 rotate() 变形样式稍稍调整一下,再用到一个正方形元素上,就可以很容易地得到一个菱形。

这个技巧的关键在于,我们利用伪元素以及定位属性产生了一个方块,然后对伪元素设置样式,并将其放置在其宿主元素的下层。这种思路同样可,以运用在其他场景中,从而得到各种各样的效果。

  • 如果要在 IE8 下实现多重背景,这个方法往往是不错的变通解决方案。。
  • 当我们不能使用“多重边框”中的技巧时,这个方法还可以用一种更加灵活的方式来模拟多层边框。比如,当我们需要多层的虚线边框,或者需要在多重边框之间留有透明空隙时。
  • 相关规范
    CSS 变形http://w3.org/TR/css-transforms

个人博客 :晴栀Sunset

CSS实现平行四边形_第12张图片

你可能感兴趣的:(CSS,干货,web,css,css3,html)