Settlers of Catan Game Tiles

index.haml

.settlers
  .row
    .img-wrap
      .tile.forest
      %span.disc 11
    .img-wrap
      .tile.pasture
      %span.disc 12
    .img-wrap
      .tile.fields
      %span.disc 9
  .row
    .img-wrap
      .tile.hills
      %span.disc 4
    .img-wrap
      .tile.mountains
      %span.disc.red 6
    .img-wrap
      .tile.hills
      %span.disc 5
    .img-wrap
      .tile.pasture
      %span.disc 10
  .row
    .img-wrap
      .tile.desert
    .img-wrap
      .tile.forest
      %span.disc 3
    .img-wrap
      .tile.fields
      %span.disc 11
    .img-wrap
      .tile.forest
      %span.disc 4
    .img-wrap
      .tile.fields
      %span.disc.red 8
  .row
    .img-wrap
      .tile.hills
      %span.disc.red 8
    .img-wrap
      .tile.pasture
      %span.disc 10
    .img-wrap
      .tile.pasture
      %span.disc 9
    .img-wrap
      .tile.mountains
      %span.disc 3
  .row
    .img-wrap
      .tile.mountains
      %span.disc 5
    .img-wrap
      .tile.fields
      %span.disc 2
    .img-wrap
      .tile.forest
      %span.disc.red 6

settlers-of-catan-game-tiles.markdown

Settlers of Catan Game Tiles

I started playing around with CSS clipping paths and after I had a hexagon in my pen, the rest just fell into place. I centered the elements in their rows with flexbox and then used a negative bottom margin to line them up. The artwork for the tiles comes from Ryan Schenk (ryanschenk.com) and if you like them he has printable versions on his blog.

Originally I had them flush, but I like a little border to make them look like tiles. I have an image for ocean tiles but I might need to make everything smaller before I add another row all around the board.

A Pen by Anthony Skelton on CodePen.

License.

style.scss

body {
	display: flex;
	justify-content: center;
	align-items: center;
  background: #2196F3;
  margin: 4em 0;
}
.img-wrap {
  z-index:10;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: moccasin;
  position: relative;
  height: 365px;
  width: 320px;
  margin-right: 2px;
}
.tile {
  z-index:20;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -90px;
}

.hills,
.desert,
.forest,
.mountains,
.ocean,
.pasture,
.fields {
  background-size: 195%;
  background-repeat: no-repeat;
  background-position: 51% 46%;
}

.hills {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-brick.png');
}
.desert {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-desert.png');
}
.forest {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-forest.png');
}
.mountains {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-mountain.png');
}
.ocean {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-ocean.png');
}
.pasture {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-pasture.png');
}
.fields {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/catan-wheat.png');
}

.disc {
  background-color: moccasin;
  border: 3px solid #222;
  border-radius: 2em;
  font-size: 4em;
  left: 50%;
  line-height: 1.5em;
  margin-top: -0.8em;
  margin-left: -0.8em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 1.5em;
  z-index: 30;
}

.red {
  color: red;
}