置顶小标签

2021-09-06

前端

美色不同面,皆佳于目;悲音不共声,皆快于耳。——王充

原理是通过一个红色div加红色背景颜色,旋转45后度再整个边框设置超出部分隐藏

效果如下:

代码:

1
2
3
4
5
<div class="top-article-tag-parent">
<div class="top-article-tag">
置顶
</div>
</div>

样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}