html制作收货地址页面,css 收货地址平行四边形的线条样式示例代码

编程知识 更新时间:2023-04-04 23:48:33

代码如下所示:

// 收货地址的平行四边形的线条样式

//样式

.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实现收货地址下边的平行四边形彩色线条

.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;

}

到此这篇关于css 收货地址平行四边形的线条样式示例代码的文章就介绍到这了,更多相关css边框线条样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

更多推荐

html制作收货地址页面,css 收货地址平行四边形的线条样式示例代码

本文发布于:2023-04-04 23:48:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/46e325cdbf00324de7cd0080feae7791.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:收货   地址   示例   线条   样式

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 43767文章数
  • 14阅读数
  • 0评论数