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
|
<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
width: 800px;
height: 800px;
background: #f06;
}
#polygon {
clip-path: polygon(0 0%,
100px 50%,
200px 0,
300px 50%,
400px 0,
500px 50%,
600px 0,
700px 50%,
800px 0,
90% 100%,
50% 60%,
10% 100%);
}
#circle {
clip-path: circle(25% at 30% 40%);
}
#ellipse {
clip-path: ellipse(40% 30% at 25% 30%) content-box;
padding: 20px;
}
#ellipse-padding-box {
clip-path: ellipse(40% 30% at 25% 30%) padding-box;
padding: 20px;
}
#inset {
clip-path: inset(200px 100px 30% 15%);
}
.svg {
width: 800px;
height: 800px;
}
#rect {
clip-path: polygon(0 0,
100px 50%,
200px 0,
300px 50%,
400px 0,
500px 50%,
600px 0,
700px 50%,
800px 0,
90% 100%,
50% 60%,
10% 100%);
stroke: red;
stroke-width: 20px;
fill: blue;
}
#polygon-transform {
width: 600px;
height: 600px;
clip-path: polygon(0 0,
100px 50%,
200px 0,
300px 50%,
400px 0,
500px 50%,
600px 0,
700px 50%,
800px 0,
90% 100%,
50% 60%,
10% 100%);
}
</style>
<div class="wrapper" id="polygon"></div>
<div class="wrapper" id="circle"></div>
<div class="wrapper" id="ellipse"></div>
<div class="wrapper" id="ellipse-padding-box"></div>
<div class="wrapper" id="inset"></div>
<div class="wrapper" id="polygon-transform"></div>
<svg class="svg">
<rect id="rect" x="10" y="10" width="700" height="700"></rect>
</svg>
|
