【CSS】css实现左上角三角标记

html部分

<div class="mark">
    <div class="text">未完成</div>
</div>

实现左上角有颜色的三角标

.mark{
    width: 0px;
    height: 0px;
    border-top: 30px solid #ff5c2c;
    border-right: 30px solid transparent;
}

三角标里的文字

.text{
    /*实现不换行*/
    white-space: nowrap;
    /*实现旋转平移缩小*/
    transform: rotate(-45deg) scale(0.5) translateX(34px) translateY(-29px);
}

如果不使用transform进行平移，也可以使用定位实现，mark相对定位relative，text绝对定位positive，再使用top和left移动

.mark {
    width: 0px;
    height: 0px;
    border-top: 30px solid #ff5c2c;
    border-right: 30px solid transparent;
    position: relative;
}
.text{
    white-space: nowrap;
    transform: rotate(-45deg) scale(0.5);
    position: absolute;
    top: -30px;
    left: -14px;
}