1、实现尖角符号。这是内联inline-block标签独有的特性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
1、实现尖角符号。
这是内联inline-block标签独有的特性。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ border-top:30px solid #000000 ; border-bottom: 30px solid #2c78d5; border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021; display: inline-block; } .b{ border-top:30px solid #000000 ; /*border-bottom: 30px solid #2c78d5;*/ border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021; display: inline-block; } .c{ border: 30px solid transparent; /*transparent为透明色*/ margin-top:20px ; display: inline-block; border-top:30px solid #000000 ; } .c:hover{ margin-top:-10px ; border: 30px solid transparent; border-bottom:30px solid #000000; } .bb{ border-top:30px solid #000000 ; /*border-bottom: 30px solid #2c78d5;*/ border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021; display: inline-block; } /*bb为自己想的方法,不需要改变自身的位置即可。*/ /*bb和b为长方形,其他为正方形*/ .bb:hover{ margin-top:15px ; border: 0; border-bottom: 30px solid #2c78d5; border-left:30px solid #1dd537 ; border-right: 30px solid #ff3021; } .a:hover{ } </style></head><body> <div class="a"></div><div class="b"></div> <div class="bb"></div><div style="background-color: #ff3021;height: 70px"> <div class="c"></div></div></body></html>
原标题:CSS拾遗+技巧集合
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。