礼品标签css

最新推荐文章于 2024-10-02 15:35:50 发布

吻痕成茧

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量130

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_45550087/article/details/108619745

版权

标签效果如下

less 代码

.gift_label-color(@color:#FCCA1E){
	color: #FFFFFF;
	background-color:@color;
	position: relative;
	height: 50rpx;
	line-height: 50rpx;
	padding-right: 16rpx;
	padding-left: 10rpx;
	z-index: 2;
	&::before{
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		position: absolute;
		left: -25rpx;
		top: 0;
		border-top: 25rpx solid transparent;
		border-right: 25rpx solid @color;
		border-bottom: 26rpx solid transparent; 
		
	}
	&::after{
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		position: absolute;
		right: 0rpx;
		top: -10rpx;  
		width: 0;
		border-bottom: 10rpx solid #fcb841;
		border-right: 20rpx solid transparent;
		
	}
}

.gift_label{
	.gift_label-color  //自定义颜色  .gift_label-color(颜色值)
}