css - 带有 CSS 的小方 block 背景图案

Question

我正在尝试重现类似于下面这种模式的 NavBar:

有谁知道我如何使用纯 CSS 应用这个小方 block 图案？它们从顶部的这种浅蓝色开始，并在大约 50% 的高度处平滑地渐变到白色。

非常感谢!

Answer 1

有必要为 nav 添加 position: relative;。代码如下。

或者可以裁剪出一张图片，在 100% 高度的右侧或左侧带有正方形和白色缩进。将其设置为 nav 并指定一个属性 background-repeat: repeat-x;

.container{
  max-width:900px;
  margin:0 auto;
  border:1px solid grey;
  padding:0 20px;
}

nav{
  display:flex;
  justify-content:space-between;
  border:2px solid red;
  position: relative;
}

nav:before{
  background-image:
    linear-gradient(white 50%, transparent 50%),
    linear-gradient(to right, white 50%, #a2cbf4 50%);
  background-size: 5px 5px;
}

.logo{
  height: 40px;
  background-color: pink;
}

.checkered-bg {
  width: 100%;
  height: 100%;
}

.checkered-bg::before, .checkered-bg::after {
  content: "";
  width: 100%;
  height: 70%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.checkered-bg::before {
  background-image:
    linear-gradient(white 50%, transparent 50%),
    linear-gradient(to right, white 50%, #a2cbf4 50%);
  background-size: 5px 5px;
}

.checkered-bg::after {
  background-image: linear-gradient(transparent, white);
}

<div class="container">
<nav class="checkered-bg">
  <div class="logo">logo</div>
  <div class="menu">menu</div>
</nav>
</div>