效果图
在这里插入图片描述

<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>
.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;
		}
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注