<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 500px; height: 500px; background: #ddd; margin: 20px auto; position: relative; } .box .icon { display: block; height: 30px; line-height: 30px; color: #fff; position: absolute; right: -35px; top: 35px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } .box .icon span { display: inline-block; float: left; } .box .icon span.left { width: 0; height: 0; border-top: 30px solid transparent; border-right: 30px solid #db0202; } .box .icon span.right { width: 0; height: 0; border-top: 30px solid transparent; border-left: 30px solid #db0202; } .box .icon span.center { height: 30px; line-height: 30px; color: #fff; background-color: #db0202; } </style> </head> <body> <div class="box"> <div class="icon"><span class="left"></span><span class="center">专营高品质茶器</span><span class="right"></span></div> </div> </body> </html>
效果图：
