CSS-Secret/bevel-corners-try.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bevel corners try</title>
    <style>
        body,h2{
            padding: 0;
            margin: 0;
        }
        body{
            color: #fff;
            font-size: 16px;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            background-image: url(imgs/header.jpg);
            background-size: 100%;
            background-repeat: no-repeat;
        }
        header{
            margin-top: 30px;
        }
        h1{
            display: block;
            color: rgba(255,255,255,.8);
            font-size: 5rem;
            font-family: Helvetica, 'Arial', sans-serif;
            letter-spacing: 25px;
            text-align: center;
            clear: both;
            padding: 30px;
            margin-left: -100px;
        }
        .right, .left{
            width: 400px;
            background: #58a;
            padding: 30px;
        }
        .left{
            background: linear-gradient(135deg,
                          transparent 0, #58a 0) top left,
                        linear-gradient(-135deg,
                          transparent 15px, #58a 0) top right,
                        linear-gradient(-45deg,
                          transparent 15px, #58a 0) bottom right,
                        linear-gradient(45deg,
                          transparent 0, #58a 0) bottom left;
            background-size: 50% 51%;
            background-repeat: no-repeat;
            float: left;
        }
        .right{
            background: linear-gradient(135deg,
                          transparent 15px, #58a 0) top left,
                        linear-gradient(-135deg,
                          transparent 0, #58a 0) top right,
                        linear-gradient(-45deg,
                          transparent 0, #58a 0) bottom right,
                        linear-gradient(45deg,
                          transparent 15px, #58a 0) bottom left;
            background-size: 50% 51%;
            background-repeat: no-repeat;
            float: right;
        }
        .right li, .left li{
            list-style: none;
            float: left;
        }
        .add:before,.add:after{
            color: #fff;
            content: '|';
            padding: 30px;
        }
        .content{
            background: #58a;
            background: linear-gradient(135deg,
                          transparent 15px, #58a 0) top left,
                        linear-gradient(-135deg,
                          transparent 15px, #58a 0) top right,
                        linear-gradient(-45deg,
                          transparent 15px, #58a 0) bottom right,
                        linear-gradient(45deg,
                          transparent 15px, #58a 0) bottom left;
            background-size: 50% 51%;
            background-repeat: no-repeat;
            width: 400px;
            padding: 10px 30px;
            margin: 30px auto;
            margin-top: -120px;
        }
        .content h2{
            color: #000;
         }
        .content p{
            text-align: left;
            font-size: .8rem;
        }
        footer{
            margin-top: 115px;
        }
        footer h2{
            display: inline-block;
            color: #58a;
            background: #fff;
            padding: 11px 20px;
            margin-left: 20%;
        }
        .footer-right{
            width: 60%;
            background: #58a;
            padding: 0 20px;
            float: right;
        }
        .footer-right p{
            display: inline-block;
            margin-right: 20px;
        }
        .footer-right input{
            padding: 2px 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<header>
    <ul class="left">
        <li>HOME</li>
        <li class="add">MENU</li>
        <li>EVENT</li>
    </ul>
    <ul class="right">
        <li>PARTY ROOM</li>
        <li class="add">ABOUT</li>
        <li>CONTANT</li>
    </ul>
    </header>
    <section>
        <h1>FRESH</h1>
        <div class="content">
            <h2>Welcome.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
            <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. </p>
        </div>
    </section>
    <footer>
        <h2>Lorem ipsum</h2>
        <div class="footer-right">
            <p>Fusce posuere, magna sed pulvinar ultricies.</p>
            <input type="text" name="in" value="input something..." />
            <input type="button" name="sm" value="submit">
        </div>
    </footer>
</body>
</html>