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>