美色不同面，皆佳于目；悲音不共声，皆快于耳。——王充
原理是通过一个红色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;
}
|