<div class="diamond" id="diamond-1">
    <div class="diamond-text-container"><div class="diamond-text">ABOUT US</div></div>
  </div>

  <div class="diamond" id="diamond-2">
      <div class="diamond-text-container"><div class="diamond-text">STONES</div></div>
  </div>

#diamond-1, #diamond-2, #diamond-3 {
  width: 120px;
  height: 120px;
  background: #1eff00;
  /* Rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* Rotate Origin */
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  display: inline-block;
}

#diamond-1::after{
  content: "";
  width: 160px;
  height: 160px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -80px;
  margin-top: -80px;
  background: inherit;
  /* Rotate */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}