css怎样实现相似订单地址下的线条样式?

发布时间：2023-08-05 14:26:21 所属栏目：语言来源：

导读： 本文给大家分享用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>

（编辑：聊城站长网）

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