1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .quanbu{
8 border-top: 30px solid red ;
9 border-right: 30px solid black ;
10 border-bottom: 30px solid green ;
11 border-left: 30px solid blue ;
12 display: inline-block;
13 }
14 .up{
15 border-top: 30px solid transparent ;
16 border-right: 30px solid transparent ;
17 border-bottom: 30px solid green ;
18 border-left: 30px solid transparent ;
19 display: inline-block;
20 }
21 .down{
22 border-top: 30px solid red ;
23 border-right: 30px solid transparent ;
24 border-bottom: 30px solid transparent ;
25 border-left: 30px solid transparent ;
26 display: inline-block;
27 }
28 .yiban{
29 border-top: 30px solid red ;
30 border-right: 30px solid black ;
31 border-bottom: 0px solid green ;
32 border-left: 30px solid blue ;
33 display: inline-block;
34 }
35 .c1{
36
37 border: 30px solid transparent ;
38 display: inline-block;
39 border-bottom-color: green;
40 margin-top: -15px;
41 }
42 .c1:hover{
43 border: 30px solid transparent ;
44 border-top-color: green;
45 margin-top: 15px;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="quanbu"></div>
51 <div class="up"></div>
52 <div class="down"></div>
53 <div class="yiban"></div>
54 <div style="height: 60px">
55 <div class="c1"></div>
56 </div>
57
58 </body>
59 </html>
