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

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

原文地址:https://blog.csdn.net/weixin_44987713/article/details/125974628

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_32128.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

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