0
点赞
收藏
分享

微信扫一扫

003-CSS-斑马线&棋盘效果

49路末班车 03-06 23:00 阅读 2
css前端

斑马线&棋盘效果

斑马线布局效果

💡 Tips:通过 linear-gradient 配合 background 属性实现

.zebra-crossing {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: linear-gradient(to right, #fff 0%, #fff 50%, #999 50%, #999 100%);
  background-size: 50px 100%;
}

实现效果图如下:
在这里插入图片描述

棋盘布局效果

💡 Tips:background-position 控制绘制位置,linear-gradient 控制绘制内容

/*
  灰色模块,通过绘制 4 个三角形,形成 两个成对角的正方形
*/
.checkerboard {
  margin-top: 20px;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #ccc 0),
    linear-gradient(45deg, #ccc 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #ccc 0);
  background-position: 0 0, -15px 15px, 15px -15px, 30px 30px;
  background-size: 30px 30px;
  background-color: white;
}

实现效果图如下:
在这里插入图片描述

举报

相关推荐

【创意提高】斑马线

0 条评论