https://blog.csdn.net/qq_45768871/article/details/112912987
https://static-d2e4cba4-f993-420c-afe4-52d6a785971c.bspapp.com/
平行四边形
文章目录
平行四边形
背景知识
难题
嵌套元素方案
伪元素方案
总结
时间有三种步伐：未来姗姗来迟，现在象箭一样飞逝，过去永远静止不动。
背景知识
基本的 CSS 变形
难题
平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则不一定都是直角。在视觉设计中，平行四边形往往可以传达出一种动感。
让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮，辅以一些简单的样式，如图 3-13 所示。然后，我们可以通过skew() 的变形属性来对这个矩形进行斜向拉伸：
但是，这导致它的内容也发生了斜向变形，这很不好看，而且难读（参 见图 3-14）。有没有办法只让容器的形状倾斜，而保持其内容不变呢？
嵌套元素方案
我们可以对内容再应用一次反向的 skew() 变形，从而抵消容器的变形效果，最终产生我们所期望的结果。不幸的是，这意味着我们将不得不使用一层额外的 HTML 元素来包裹内容，比如用一个 div：
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
1
2
<a href="#yolo" class="button">
<div>Click me</div>
</a>
1
2
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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 me</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
·如果你想把这个效果应用到一个默认显示为行内的元素，不要忘记把它的 display 属性设置为其他 值， 比 如 inline-block或 block，否则变形是不会生效的。这一点对它内层的元素也是适用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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 me</a>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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 me</a>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
我们在图 3-15 中可以看到，这个方法的表现很不错，但它也意味着我 们不得不添加额外的 HTML 元素。如果结构层的变更是不允许的，或者你 希望严格保持结构层的纯净度，别担心，我们还有一个纯 CSS 的解决方案。
伪元素方案
另一种思路是把所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。
我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用 position: relative 样式，并为伪元素设置 position: absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代码看起来是这样的：
.button {
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: ‘‘;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
1
2
3
4
5
6
7
8
9
此时，用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，就会遮住内容（参见图 3-16）。
为了修复这个问题，我们可以给伪元素设置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);
}
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
总结
这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。举个例子，我们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。
这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块，然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可，以运用在其他场景中，从而得到各种各样的效果。
如果要在 IE8 下实现多重背景，这个方法往往是不错的变通解决方案。。
当我们不能使用“多重边框”中的技巧时，这个方法还可以用一种更加灵活的方式来模拟多层边框。比如，当我们需要多层的虚线边框，或者需要在多重边框之间留有透明空隙时。
————————————————
版权声明：本文为CSDN博主「妙趣前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45768871/article/details/112912987