CSS100Day(17)-svg实现彭罗斯三角

1
<div class="frame">
2
    <div class="stripes">
3
        <!-- 29条线 -->
4
        <div class="stripe"></div>
5
        <div class="stripe"></div>
6
        <div class="stripe"></div>
7
        <div class="stripe"></div>
8
        <div class="stripe"></div>
9
        <div class="stripe"></div>
10
        <div class="stripe"></div>
11
        <div class="stripe"></div>
12
        <div class="stripe"></div>
13
        <div class="stripe"></div>
14
        <div class="stripe"></div>
15
        <div class="stripe"></div>
16
        <div class="stripe"></div>
17
        <div class="stripe"></div>
18
        <div class="stripe"></div>
19
        <div class="stripe"></div>
20
        <div class="stripe"></div>
21
        <div class="stripe"></div>
22
        <div class="stripe"></div>
23
        <div class="stripe"></div>
24
        <div class="stripe"></div>
25
        <div class="stripe"></div>
26
        <div class="stripe"></div>
27
        <div class="stripe"></div>
28
        <div class="stripe"></div>
29
        <div class="stripe"></div>
30
        <div class="stripe"></div>
31
        <div class="stripe"></div>
32
        <div class="stripe"></div>
33
    </div>
34
    <div class="center">
35
        <svg class="polygon">
36
            <polygon class="middle" points="68,0 91,0 160,117 46,117 59,93 121,93" />
37
            <polygon class="dark" points="68,41 79,59 46,117 160,117 147,140 11,140" />
38
            <polygon class="light" points="0,117 68,0 121,93 98,93 68,41 11,140" />
39
        </svg>
40
    </div>
41
</div>

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    border-radius: 2px;
5
    box-sizing: border-box;
6
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
7
    background: #fff;
8
    overflow: hidden;
9
    position: relative;
10
}
11

12
.stripes {
13
    position: absolute;
14
    top: -67px;
15
    left: -100px;
16
    width: 600px;
17
    rotate: 45deg;
18

19
    .stripe {
20
        background: #353535;
21
        width: 600px;
22
        height: 3px;
23
        margin-bottom: 16px;
24
    }
25
}
26

27
.center {
28
    position: absolute;
29
    width: 260px;
30
    height: 260px;
31
    top: 70px;
32
    left: 70px;
33
    background: #353535;
34
    border-radius: 3px;
35
    box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.3);
36
}
37

38
.polygon {
39
    position: absolute;
40
    width: 160px;
41
    height: 160px;
42
    top: 60px;
43
    left: 50px;
44

45
    .light {
46
        fill: #eee;
47
        transition: all 0.5s ease-in-out;
48
    }
49
    .middle {
50
        fill: #ccc;
51
        transition: all 0.5s ease-in-out;
52
    }
53
    .dark {
54
        fill: #aaa;
55
        transition: all 0.5s ease-in-out;
56
    }
57

58
    &:hover {
59
        .light {
60
            fill: #aaa;
61
        }
62
        .middle {
63
            fill: #eee;
64
        }
65
        .dark {
66
            fill: #ccc;
67
        }
68
    }
69
}