<view style="position: relative;overflow: hidden;">
    <view class="onlineMark"></view>
</view>
.onlineMark {
    position: absolute;
    top:0px;
    left:0px;
    width: 50px;
    height: 20px;
    background-color: #00A9E2;
    transform: rotate(-45deg);

    text-align: center;
    padding: 5rpx;
    margin-left: -40rpx;
    margin-top: -25rpx;
 }

image.png

(1) 总结

• 父节点：设置为相对布局；超出部分隐藏
• 小三角（子节点）：设置为绝对布局；位置为左上角；绘制长方形（长、宽和背景色）并旋转45度；有文字则设置文字居中显示；内外边距用于微调

(2) 问题：若父节点下有多个设置为绝对布局的子节点，因为设置了父节点超出部分隐藏，可能会导致其他子节点显示不完全。

• 举例：父节点下有两个子节点都设置为绝对布局，一个是小三角（左上角），一个是弹窗（右上角偏下），则此时弹窗超出父节点的部分被隐藏了

  
  
  image.png

• 解决：绘制正方形（边长）；左上圆角设置为父布局左上圆角的大小；右下圆角设置为正方形的边的大小；修改正方形边长来微调

• 界面展示

.onlineMark {
    position: absolute;
    top:0px;
    left:0px;
    width: 0.8rem;
    height: 0.8rem;
    border-top-left-radius: 0.3rem;
    border-bottom-right-radius: 0.8rem;
    
    background-color: #00A9E2;
    
    // transform: rotate(-45deg);
    // text-align: center;
    //  padding: 5rpx;
    //  margin-left: -40rpx;
    //  margin-top: -25rpx;
 }

image.png