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>
|
