<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

:root {
  --clr1: #4caf50a8;
  --clr2: #8bc34aad;
  --clr3: #03a9f487;
  --clr4: #ffeb3b6e;
  --clr5: #00000029;
  --unit: 1vmax;
}

body {
  background: #222222;
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
}

div {
  width: calc(var(--unit) * 10);
  height: calc(var(--unit) * 10);
  background: var(--clr1);
  position: relative;
  float: left;
}

div:before,
div:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  border: calc(var(--unit) * 5) solid var(--clr2);
  border-top-color: var(--clr3);
  border-left: calc(var(--unit) * 2.925) solid transparent;
  border-right: calc(var(--unit) * 2.925) solid transparent;
  width: 100%;
  height: 100%;
}

div:after {
  border-top-color: var(--clr4);
  border-bottom-color: var(--clr5);
  transform: rotate(90deg);
}

@media only screen and (orientation: portrait) {
  :root {
    --unit: 2vmin;
  }
}