置顶小标签
美色不同面，皆佳于目；悲音不共声，皆快于耳。——王充
原理是通过一个红色div加红色背景颜色，旋转45后度再整个边框设置超出部分隐藏
效果如下：
代码：
<div class="top-article-tag-parent">
<div class="top-article-tag">
置顶
</div>
</div>样式：
.top-article-tag-parent {
overflow: hidden;
position: absolute;
right: 46rpx;
height: 80rpx;
width: 100rpx;
zoom: 0.8;
}
.top-article-tag {
color: #fff;
background-color: #ff0000;
width: 150rpx;
height: 40rpx;
text-align: center;
transform: rotate(45deg);
font-size: 24rpx;
line-height: 44rpx;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-09-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读