css怎样完成类似订单地址下的线条样式?

发布时间：2022-11-12 11:20:57 所属栏目：编程来源：

导读：　　本文给大家分享用css怎样实现类似订单地址下的线条样式，一些订单在收获地址下方有四边形的线条样式的设计，那么这种线条样式是怎样做呢？本文就给大家分享一个实现方法，感兴趣的朋友可以参考。
　　
　　代码

　　本文给大家分享用css怎样实现类似订单地址下的线条样式，一些订单在收获地址下方有四边形的线条样式的设计，那么这种线条样式是怎样做呢？本文就给大家分享一个实现方法，感兴趣的朋友可以参考。
　　
　　代码如下所示：
　　
　　// 收货地址的平行四边形的线条样式
　　<view class="top"></view>

　　//样式
　　.top{
　　background-color: #fff;
　　     position: relative;
　　}
　　.top: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: 80px;
　　    content: "";
　　}
　　
　　
　　ps：css实现收货地址下边的平行四边形彩色线条
　　
　　<div class="xiantiao">
　　 <div class="city" style="margin-left:8px;"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city"></div>
　　 <div class="city" style="margin-right:0px;"></div>
　　</div>
　　<style>

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

什么是生成树生成树	Python __repr__ 方法
C++ static静态成员变	C++继承时的名字遮蔽问

css怎样完成类似订单地址 下的线条样式?

css怎样完成类似订单地址下的线条样式?