首页 > 代码库 > 小尖角的制作
小尖角的制作
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>
小尖角的制作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。