css3实例2——制作小标题(丝带)
效果图如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3小标题制作</title> <style type="text/css"> *{margin:0px;padding:0px;} html body{width:100%;height:100%;text-align: center;} .ribbon{display:inline-block;position:relative;} .ribbon{margin:0;margin-top:5%;padding:0.34em 1em;text-align: center;} .ribbon{letter-spacing:0.1em;color: #ffffff;font-size: 12px;font-family:'Patua One',sans-serif;} .ribbon{ text-shadow:0px -1px 0px rgba(0,0,0,0.3); box-shadow: inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 20px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.4); background:-webkit-linear-gradient(top,#1eb2df, #17a7d2); } .ribbon:before, .ribbon:after { content: ""; z-index:-2; display:block; position:absolute; bottom:-0.5em; width:0.2em; border:0.9em solid #1eb2df; box-shadow:0px 1px 0px rgba(0,0,0,0.4); } .ribbon:before{ left:-1.35em; border-right-width: .75em; border-left-color:transparent; } .ribbon:after{ right:-1.35em; border-left-width: .75em; border-right-color:transparent; } .content:before, .content:after { content:""; bottom:-.5em; position:absolute; display:block; border-style:solid; border-color: #0675b3 transparent transparent transparent; z-index:-1; } .content:before{ left: 0; border-width: .5em 0 0 .5em; } .content:after { right: 0; border-width: .5em .5em 0 0; } </style> </head> <body> <div class="ribbon" > <span class="content" >Hello There</span> </div> </body> </html>
DO What You Want !