css如何实现类似订单地址下的线条样式?

发布时间：2023-12-28 18:37:58 所属栏目：语言来源：DaWei

导读： 本文给大家分享用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>
.xiantiao{width:100%; height:2px; overflow: hidden;}
.city {
width:36px;
height:2px;
margin-right: 23px;
background-color: #44a5fc;
color: #333;
transform: skew(-45deg);
float:left;
}
</style>
以上就是用css实现类似订单地址下的线条样式的代码，需要的朋友可以参考了解，希望对大家学习css线条样式的实现有帮助.

（编辑：财气旺网 - 财气网）

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