小尖角的制作

 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>