使用css渐变的倾斜网格图案

Question

您好。我想达到上述结果，但我能想到的最好的是this codepen。有更好的想法吗？

body {
  background-color: #0200ff;
  background-size: 65px 65px, 65px 65px;
  background-image:
  repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 46px),
  repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 46px);
  color: white;
}

Answer 1

此解决方案适用于我们https://codepen.io/kelonye/pen/BdPJqp?editors=1100：

.bg {
  position: absolute;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  background-color: #0200ff;
  z-index: 100;
  background-image: linear-gradient(rgba(39,38,255,1) 1px, transparent 1px),
  linear-gradient(90deg, rgba(39,38,255,1) 1px, transparent 1px);
  background-size: 60px 60px, 60px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
  -webkit-transform: rotate(-15deg);
}