CSS多色条纹

最新推荐文章于 2025-06-16 17:16:46 发布

污斑兔

最新推荐文章于 2025-06-16 17:16:46 发布

阅读量221

点赞数 2

文章标签：前端 CSS

本文链接：https://blog.youkuaiyun.com/zweizhao/article/details/143136500

版权

CSS多色条纹

双色与三色

div {
  background-image: linear-gradient(red 33.3%, yellow 0);
  background-size: 100% 30px;
}

div {
  // 兼容性差点
  // background-image: repeating-linear-gradient(45deg, black 0 15px, transparent 0 30px);
  background-image: linear-gradient(red 33.3%, yellow 0, yellow 66.6%, blue 0);
  background-size: 100% 30px;
}