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
body {
    overflow:hidden;
}
.wrapper {
    position:relative;
    margin:1em auto;
    padding:0;
    width:13em;
    height:5em;
    box-shadow:inset -1px -1px 0 black;
    list-style:none;
    background:linear-gradient(black 2.5%,transparent 1px),linear-gradient(90deg,black 2.5%,transparent 1px);
    background-size:1em 1em;
    font:2.5em Verdana,sans-serif;
}
.piece {
    position:absolute;
    right:0;
    bottom:0;
    opacity:.85;
    animation:ani 4s infinite linear alternate;
}
.triangle {
    overflow:hidden;
    transform-origin:0 100%;
}
.piece:before {
    position:absolute;
    content:'';
}
.triangle:before {
    width:inherit;
    height:inherit;
    transform-origin:inherit;
}
.block {
    width:5em;
    height:1em;
}
.block:before {
    height:1em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX