title: CSS custom shape button with multiple colors
body: <p>I am stuck trying to create this button with CSS. So long I have tried to create predesigned images but they just don't fit together when loaded in a HTML page.</p>
  
  <p><img src="https://i.stack.imgur.com/ewvZ4.png" alt="Every square is supposed to be a transparent button"></p>
  
  <p>Every square is supposed to be a transparent button. (The center button has text too but is white.)</p>
  
  <p><img src="https://i.stack.imgur.com/tJasB.png" alt="That&#39;s the page"></p>
  
  <p>That's the page.</p>
  
  <p>Can anybody provide some advice or guidance?</p>
  
  <p>Here is some code for people who requestet it:</p>
  
  <pre><code>&lt;div class="caja"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;img class="promociones" ng-click="botonPromo()"&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
        &lt;img class="alerta" ng-click="botonAlerta()"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;img class="buzon" ng-click="botonBuzon()"&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;img class="aprobados" ng-click="botonAprob()"&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
        &lt;img class="atm" ng-click="botonATM()"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS (Is impossible to fit the perfectly):</p>
  
  <pre><code>.buzonMenu-page .promociones{
    content: url(../img/menu/Artboard-172[4].png);
    width: 100%;
  }
  
  .buzonMenu-page .alerta{
    content: url(../img/menu/Artboard-173[4].png);
    width: 100%;
  }
  
  .buzonMenu-page .buzon{
    content: url(../img/menu/Artboard-176[4].png);
    width: 100%;
  }
  
  .buzonMenu-page .aprobados{
    content: url(../img/menu/Artboard-175[4].png);
    width: 100%;
  }
  
  .buzonMenu-page .atm{
    content: url(../img/menu/Artboard-174[4].png);
    width: 100%;
  }
  
  .buzonMenu-page .row{
    margin-top: 0px;
    padding: 0px;
  }
  
  .buzonMenu-page .col{
    padding: 0%;
  }
  
  .buzonMenu-page .col .promociones, .aprobados{
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 9%;
    padding-bottom: 0%;
  }
  
  .buzonMenu-page .col .alerta, .buzonMenu-page .col .atm{
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 9%;
  }
  
  .buzonMenu-page .row .aprobados, .buzonMenu-page .row .atm{
    position: relative;
    margin-top: -31%;
  }
  
  .buzonMenu-page .row .aprobados{
    position: relative;
    margin-top: -32%;
  }
  
  .buzonMenu-page .row .atm{
    position: relative;
    margin-left: -1%;
  }
  
  .buzonMenu-page .buzon{
    position: relative;
    z-index: 2;
    margin-top: -17%;
    margin-left: -2%;
    width: 39%; 
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>The problem is that it is impossible to fit the images perfectly, as shown on this picture, they always miss by a few pixels:</p>
  
  <p><img src="https://i.stack.imgur.com/hleGy.png" alt="enter image description here"></p>
  
  <p>So my original question is how to make this 5 buttons with CSS? Something like they did with this question: <a href="https://stackoverflow.com/questions/20951767/css-custom-shape-button-with-two-colors">CSS custom shape button with two colors</a></p>