置顶小标签

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

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

效果如下：

代码：

代码语言：javascript复制

<div class="top-article-tag-parent">
    <div class="top-article-tag">
        置顶
    </div>
</div>

样式：

代码语言：javascript复制

.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;
}

原理

0 人点赞