标签倾斜横幅效果
<!-- run -->
<style>
.bg{
overflow: hidden;
width: 300px;
height: 150px;
margin: 30px;
border-radius: 10px;
box-shadow: 15px 15px 15px #999;
background-color: cornflowerblue;
}
.text_bg{
position: relative;
content: '';
margin-left: -170px;
padding: 0px 180px;
border-top: none;
z-index: 1;
color: #fff;
transform: rotate(-45deg);
font-size: 22px;
background: #446495;
}
</style>
<div>
<div class="bg">
<div class="text_bg">爆款</div>
</div>
</div>
未经作者授权,禁止转载
本文来自博客园,作者:CoderWGB,转载请注明原文链接:https://www.cnblogs.com/wgb1234/articles/16834328.html
THE END

浙公网安备 33010602011771号