纯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;
}
</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>另外推荐：前端常用到的6种精美纯CSS3丝带效果： http://www.jq22.com/webqd3850
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
