将棋盤の星(4点の黒丸)をCSSで表現

まず将棋盤を table タグで表現

sass

table
  background: black
  border-collapse: separate
  border-spacing: 1px
  width: 80vmin
  height: 80vmin
  td
    background: white

border-collapse: separate で作ると簡単です。

td タグの中に●を作る

次の、任意のクラスの背景に任意の画像を差し込むイディオムがあります。
これを知っているとだいたいなんでもできます。

sass

.foo
  position: relative
  &:after
    position: absolute
    z-index: -1
    content: ""
    background-image: url("path/to/image.png")
    background-position: center
    background-size: cover
    opacity: 1.0
    top: 0
    left: 0
    width: 100%
    height: 100%

上を応用して次のように角を50%丸めた四角形をtdに埋め込みます。

See the Pen Japanese Chess Board Star CSS Sample by Akira Ikeda (@akicho8) on CodePen.

●の位置調整

sass

top:  calc(-4vmin / 2)
left: calc(-4vmin / 2)

4vmin は width, height にも指定している大きさ(直径)でこの半分(半径分)を左上にずらします。

これで交差点に●が乗ります。

本当は calc(width / 2) とか 50% とか書きたかったんですがそんな都合良くは書けないようなので妥協しています。

特定の位置だけにする

tr と td に nth-child(3n+4) を指定すると中央の4点だけが残ります。

sass

tr:nth-child(3n+4)
  td:nth-child(3n+4)

色や大きさを調整して完成

See the Pen Japanese Chess Board Star CSS Sample by Akira Ikeda (@akicho8) on CodePen.