Let’s take a look at the effect display first, which is publicly displayed in the upper right corner of the picture card.
The first is the DOM code: two views or divs are required. The public-badge is the "public" rectangle, and the show-signal is the lower triangle on the right, which is the shadow part, so it looks more three-dimensional.
<view class="public-badge">已公开</view>
<view class="show-signal"></view>
This is the css part
.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;
}
If it does not take effect, please note that when the child node is positioned using absolute, the parent node must be positioned using position: relative. Otherwise, absolute will search forward layer by layer until it finds a relative parent node and position it according to that node.
The blogger will always update the problems encountered in real projects, please pay more attention.
For more information about the use of uview components and the actual demonstration effects of uniapp and vue projects, please see: https://ext.dcloud.net.cn/plugin?id=12603.