<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>css3 斜切角</title> <style type="text/css"> .jiao.jiao1{ height: 48px; background: linear-gradient(135deg, transparent 32px, #F44336 0) top left, linear-gradient(-45deg, transparent 15px, #830E97 0) top right, linear-gradient(-45deg, transparent 32px, #9C27B0 0) bottom right, linear-gradient(135deg, transparent 15px, #DB2A1D 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .jiao.jiao2{ height: 80px; background: linear-gradient(-45deg, #FF5C27 56px, #2196F3 0) top right, linear-gradient(135deg, #FF5C27 56px, #2196F3 0) bottom left; background-size: 50% 100%; background-repeat: no-repeat; } .jiao.jiao3{ height: 48px; background: linear-gradient(135deg, transparent 16px, #03A9F4 0) top left, linear-gradient(-135deg, transparent 16px, #0090DB 0) top right, linear-gradient(-45deg, transparent 16px, #CDDC39 0) bottom right, linear-gradient(45deg, transparent 16px, #B4C320 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .jiao{padding: 9px 20px; box-sizing: border-box;margin: 0 50px 30px;} </style> </head> <body> <div class="jiao jiao1"></div> <div class="jiao jiao2"></div> <div class="jiao jiao3"></div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » css3 切角 喜欢 (0)or分享 (0)
