Skip to content

Commit 42a6a3f

Browse files
fantasaifantasai
committed
[css-break] Add diagrams.
1 parent 14112f8 commit 42a6a3f

2 files changed

Lines changed: 74 additions & 0 deletions

File tree

‎css-break/fragmented-transforms.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
4+
<style>
5+
.page {
6+
background: white;
7+
border: 1px solid; box-shadow: 2px 2px 2px gray;
8+
padding: 3px 2px;
9+
margin: -1px 25%;
10+
width: 75px;
11+
height: 105px; }
12+
13+
.container {
14+
background: green;
15+
transform: rotate(15deg);
16+
height: 100%;
17+
position: relative;
18+
}
19+
20+
.origin {
21+
border-radius: 100%;
22+
border: 5px solid red;
23+
margin: -5px;
24+
width: 0;
25+
position: absolute;
26+
top: 50%;
27+
left: 50%;
28+
}
29+
30+
.c1 {
31+
height: 100%;
32+
}
33+
34+
.c2 {
35+
height: 50%;
36+
}
37+
38+
.c3 {
39+
height: 0;
40+
}
41+
42+
.content {
43+
height: 105px;
44+
background: top left / 10px 10px linear-gradient(gray 50%, transparent 0);
45+
}
46+
</style>
47+
48+
<div class="page">
49+
<div class="container c1">
50+
<div class="origin"></div>
51+
<div class="content"></div>
52+
</div>
53+
</div>
54+
55+
<div class="page">
56+
<div class="container c1">
57+
<div class="origin"></div>
58+
<div class="content"></div>
59+
</div>
60+
</div>
61+
62+
<div class="page">
63+
<div class="container c2">
64+
<div class="origin"></div>
65+
<div class="content"></div>
66+
</div>
67+
</div>
68+
69+
<div class="page">
70+
<div class="container c3">
71+
<div class="origin"></div>
72+
<div class="content"></div>
73+
</div>
74+
</div>

‎css-break/fragmented-transforms.png‎

22.8 KB
Loading

0 commit comments

Comments
 (0)