CSS3 Responsive, dynamic octagon

Question

For a project I am working on I need to create a grid of octagons. I can create an octagon using css the problem is that it is not responsive to the browser, in that it doesn't resize with the browser window. This is important as the website is to be viewed on multiple devices and the grid would have to be viewable on mobile devices.

The octagons are purely for display purposes so it is possible I can just use an image background but I would like to avoid that if possible. I'm not adverse to doing it using JavaScript but i'm not exactly an expert with JavaScript and wouldn't know where to start.

Answer 1

Are you trying to achieve something like this? (resize browser window to see how it behaves).

.o {
  float: left;
  overflow: hidden;
  position: relative;
  padding: 5%;
}

.o::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotate(45deg);
  background: linear-gradient(dodgerblue, black);
  content: '';
}

<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>

Or something like this?

.o-outer {
  float: left;
  position: relative;
  padding: 5%;
  margin: 4.33% -3% 0 0
}

.o {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

.o::before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: rotate(45deg);
  background: radial-gradient(dodgerblue, black);
  content: '';
}

.o-outer:nth-child(even) .o {
  margin: 71.66% 0 -71.66% 0;
}

<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>
<div class="o-outer"><div class="o"></div></div>