效果图:
pPFWPYR.png

<div class='wrapp'>
        <div class='ribbon'>
            <span>当前工单</span>
        </div>
        <div class="planBox">
            <div class="item">
                <div class="">xxx</div>
                <div class="">xxx</div>
            </div>
            <div class="item">
                <div class="">xxx</div>
                <div class="">xxx</div>
             </div>
        </div>
</div>
```				

```css
.wrapp {
        position: relative;
        overflow: hidden;
        background-color: #E7F1FF;
}

.planBox {
        display: flex;
        margin: 1vh 4vw;
        padding: 10px;
}

.item {
        flex: 1;
}

.ribbon {
        background-color: #1890FF;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        left: -55px;  // 根据实际调整即可
        top: 17px;   // 根据实际调整即可
        transform: rotate(-45deg);
        box-shadow: 0 0 10px #888;

        span {
            color: #fff;
            padding: 5px 50px;
            display: block;
        }
}