具有多种颜色的CSS自定义形状按钮

Question

我试图用CSS创建这个按钮。很长时间以来，我一直试图创建预先设计的图像，但是当它们加载到HTML页面时它们只是不适合。

每个方格应该是透明按钮。 （中心按钮也有文字，但是是白色。）

这就是页面。

任何人都可以提供一些建议或指导吗？

这是针对请求它的人的一些代码：

<div class="caja">
  <div class="row">
    <div class="col">
      <img class="promociones" ng-click="botonPromo()">
    </div>
    <div class="col">
      <img class="alerta" ng-click="botonAlerta()">
    </div>
  </div>

  <img class="buzon" ng-click="botonBuzon()">

  <div class="row">
    <div class="col">
      <img class="aprobados" ng-click="botonAprob()">
    </div>
    <div class="col">
      <img class="atm" ng-click="botonATM()">
    </div>
  </div>
</div>

和CSS（不可能完美契合）：

.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%; 
}

修改

问题在于无法完美地拟合图像，如图所示，它们总是错过几个像素：

所以我最初的问题是如何使用CSS制作这5个按钮？就像他们对这个问题所做的那样：CSS custom shape button with two colors

Answer 1

您可以做的是将所有图形放在一张图像中（作为一个整体，背景，或只是按钮边框和透明区域）。然后将此图像显示在html中的所需位置（作为元素背景或img）。然后，使用代表按钮的定位div覆盖此图像。那些＆＃34;按钮div s＆＃34;应该是透明的。在按钮上设置事件处理程序，您就完成了。我已经设置了一个fiddle，用简单的彩色背景显示它的外观和行为，但是可以用你需要的任何东西替换它。在小提琴中，您可以切换按钮区域可见性（这样您就可以看到每个按钮都被剪切在正确的区域）。