0%

CSS2结合svg实现特殊几何形状效果

要实现如下图所示的效果,如果我们使用css3来制作的话,那是轻而易举的事情

但是现在这里,我要演示的是借助css2和svg来实现,具体代码如下,如果你感兴趣的话可以研究一下:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>CSS effects</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding: 0;
margin: 0;
background-color: #1c1c1c;
}
a {
text-decoration: none;
color: #000;
}
.container {
max-width: 370px;
min-width: 250px;
margin: 100px auto;
}
.content-inner {
padding: 15px;
background-color: #fff;
}
.read-more {
padding: 15px 30px 30px;
color: #fff;
background-color: #23b6b6;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
box-sizing: border-box;
}
.svg-container {
position: relative;
z-index: 11;
}
.svg-block {
fill: #1c1c1c;
stroke: none;
}
.svg-container {
bottom: 0;
width: 100%;
height: 0;
padding-top: 7.93650794%;
}
svg:not(:root) {
overflow: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
.content-bottom-svg {
margin-top: -7.78%;
}
.content-svg {
margin-top: 0;
margin-left: -3px;
margin-bottom: -7.74%;
}
</style>
</head>
<body>
<div class="container">
<div class="content-inner">
<header class="entry-header">
<h2 class="entry-title">
<a href="#" rel="bookmark">Dome Title</a>
</h2>
</header>

<div class="entry-content">
<p>Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Comprehensum, quod cognitum non habet? Omnia contraria, quos etiam insanos esse vultis. Quae in controversiam veniunt, de iis, si placet, disseramus. Ego vero volo in virtute vim esse quam maximam; Facile est hoc cernere in primis puerorum aetatulis. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum.
</p>
</div>
</div>
<div class="read-more">
Continue reading …
</div>
<div class="svg-container content-bottom-svg svg-block">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1890 150">
<g transform="translate(0,-902.36218)"></g>
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
<path d="m 1925,0 0,150 -1925,0"></path>
</svg>
</div>
<div class="svg-container content-svg svg-block">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1950 150">
<g transform="translate(0,-902.36218)"></g>
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
<path d="M 0,150 0,0 1950,0"></path>
</svg>
</div>
</div>
</body>
</html>