css实现收货地址下边的平行四边形彩色线条

lannieZ

于 2022-11-28 09:12:14 发布

阅读量591

点赞数 3

分类专栏： css3 文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/lannieZ/article/details/128073573

版权

css3 专栏收录该内容

16 篇文章

订阅专栏

这段代码展示了如何使用CSS创建一个具有底部渐变边框的用户信息块。背景颜色从白色渐变为红色和蓝色的组合，使用了repeating-linear-gradient实现。这个设计元素可能适用于前端界面的个性化装饰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述


.user_info {
			width: 100%;
			height: 198rpx;
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			padding: 26rpx 49rpx 0 34rpx;
			position: relative;

			&:before {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 2px;
				background: repeating-linear-gradient(-45deg, #ff6c6c, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0,
						#1989fa 45%, transparent 0, transparent 50%);
				background-size: 78px;
				content: "";
			}
		}