【css】用css样式快速写右上角badge徽标，颜色设置为渐变色

文章介绍了如何使用CSS样式快速制作一个位于右上角、具有渐变色背景的badge徽标，包括‘已公开’矩形和阴影效果的三角形。关键点在于利用linear-gradient设置渐变背景，以及absolute定位和border属性创建三角形。注意，absolute定位的子元素需要相对父元素定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果展示，已公开显示在图片卡片的右上角。
在这里插入图片描述
【css】用css样式快速写右上角badge徽标，颜色设置为渐变色
首先是dom代码：需要两个view或者div，public-badge是“已公开”那个矩形，show-signal是右边那个下三角，也就是阴影部分，这样看起来比较有立体感。

<view class="public-badge">已公开</view>
<view class="show-signal"></view>

这是css部分

.public-badge {
	text-align: center;
	// 设置渐变色背景
	background-image: linear-gradient(to right, #cde3e6, #999A9A), linear-gradient(100deg, #b3d5da, #8F41E9, #63acb6);
	color: #fff;
	font-size: 12px;
	width: 60px;
	border-radius: 3px 0 0 3px;
	position: absolute;
	top: 10px;
	right: -8px;
	z-index: 10;
	padding: 3px 0;
}

.show-signal {
	border: 4px solid #939393;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	width: 0;
	height: 0;
	position: absolute;
	top: 31px;
	right: -8px;
	z-index: 10;
}