css怎样实现类似订单地址下的平行四边形彩色线条样式
发布时间:2023-12-16 18:50:40 所属栏目:语言 来源: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线条样式的实现有帮助。 (编辑:52站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐