css

如何实现在某个div的右上角给个三角形,里面带文字

发布于 2024-11-13 14:37:22

期望实现这样的效果:

image.png

查看更多

关注者
0
被浏览
176
1 个回答
feige
feige 2024-11-13
分享运营真实案例,用编程创造自己的产品

这是个css样式的问题,参考一下

.title_reqstatus_running {
        margin-bottom: 30px;
        /*border: 1px solid rgba(45, 106, 230, 100);*/
        padding: 10px;
        position: relative;
    }
    .title_reqstatus_running::before {
            content: "";
            width:0;
            height: 0;
            border:60px solid transparent;
            border-right:60px solid #3a87ad;
            transform: rotate(135deg);
            position: absolute;
            right: -61px;
            top: -61px;
            cursor: pointer;
        }
    .title_reqstatus_running::after {
        content: "进行中";
        width: 45px;
        height: 35px;
        color: #FFF;
        transform: rotate(45deg);
        position: absolute;
        right: 13px;
        top: 16px;
        font-weight: bold;
        letter-spacing:2px;
        cursor: pointer;
    }

<div class="title_reqstatus_running"></div>

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览