要实现一个边角有丝带的效果，如上图左上角的标识。示例代码如下所示：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset=utf-8> <title>css边角丝带效果</title> <style type="text/css"> .Generally { background: #3588bc; overflow: hidden; white-space: nowrap; position: absolute; left: -50px; top: -10px; -webkit-transform: rotate(-47deg); -moz-transform: rotate(-47deg); -ms-transform: rotate(-47deg); -o-transform: rotate(-47deg); transform: rotate(-47deg); } .Generally a { color: rgba(254, 254, 254, 1); display: block; font-size: 12px; padding: 20px 50px 8px 50px; text-align: center; text-decoration: none; } </style> </head> <body> <div class="Generally"> <a href="#">临时</a> </div> </body> </html>
或者
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset=utf-8> <title>css边角丝带效果</title> <style type="text/css"> .test { display: flex; /* flex布局 ,适用一维布局，即行或者列*/ flex-direction: row; /* 主轴方向为水平方向，起点在左端 */ justify-content: center; /* 主轴排列方式 */ color: #fff; /* 字体颜色 */ font-size: 50px; /* 字体大小 */ width: 200px; /* 容器的宽度 */ height: 200px; /* 容器的高度度 */ background-image: linear-gradient(to bottom right, #49BCF5 50%, rgba(242, 242, 242, 0) 50%); /* 从原点到右下角渐变 */ border-radius: 10px 0 0 0; /* 右上角圆角 */ } .word { transform: rotate(-45deg); /* 文字旋转 */ } </style> </head> <body> <div class="test"> <span class="word">临时</span> </div> </body> </html>
