CSSだけでPhotoshopのような透過用格子背景を描画したサンプル

:root {
  --bg-size: 40px;
}

.bg-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: var(--bg-size) var(--bg-size);
  background-position:
    0 0,
    0 calc(var(--bg-size) / 2),
    calc(var(--bg-size) / 2) calc(var(--bg-size) / -2),
    calc(var(--bg-size) / -2) 0;
}

元記事を表示する