CSS-Secret/trapezoid-tabs.html at master · Tan12/CSS-Secret · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>trapezoid taps</title>
    <style>
        body{
            padding: 40px;
            font: 130%/2 Frutiger LT Std, sans-serif;
        }
        .tra{
            color: white;
            padding: .5em 1em .35em;
            display: inline-block;
            position: relative;
        }
        .tra::before{
            content: '';/*用伪元素来生成一个矩形*/
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            background: #58a;
            transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
            transform-origin: bottom;
        }
        .tab{
            margin-top: 50px;
            position: relative;
            padding-left: 1em;
        }
        .tab > a{
            color: #000;
            position: relative;
            padding: .3em 1em 0;
            display: inline-block;
            text-decoration: none;
            margin: 0 -.3em;
        }
        .tab > a::before,
        .con{
            border: .1em solid rgba(0,0,0,.4);
        }
        .tab a::before{
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
            border-bottom: none;
            border-radius: .5em .5em 0 0;
            box-shadow: 0 .15em white inset;
            transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
            transform-origin: bottom;
        }
        .tab a.selected { z-index: 2;}

        .tab a.selected::before {
            background-color: #eee;
            margin-bottom: -.08em;
        }
        .con{
            display: block;
            background: #eee;
            margin-bottom: 1em;
            padding: 1em;
            border-radius: .15em;
            width: 500px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="tra">TRAPEZOID</div>
    <div class="tab">
        <a href="#" class="selected">Home</a>
        <a href="#">Projects</a>
        <a href="#">About</a>
    </div>
    <div class="con"></div>

    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.tab a').each(function () {
                $(this).click(function () {
                    $(this).addClass('selected').siblings('a').removeClass('selected');
                });
            });
        });
    </script>
</body>
</html>