纯CSS3实现⼀个丝带效果
要实现⼀个边⾓有丝带的效果，如上图左上⾓的标识。⽰例代码如下所⽰：
<!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;
}
css特效文字
</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>