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

Question

我无法尝试使用 CSS 创建此按钮。很长一段时间以来，我一直尝试创建预先设计的图像，但它们在加载到 HTML 页面时就是不适合。

每个方 block 都应该是一个透明按钮。 (中心按钮也有文字，但为白色。)

就是这个页面。

谁能提供一些建议或指导？

这里有一些代码供请求它的人使用:

<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 覆盖此图像。那些“按钮div”应该是透明的。在按钮上设置事件处理程序，您就完成了。我设置了一个 fiddle它用简单的彩色背景显示了它的外观和行为，但可以用您需要的任何东西替换。在 fiddle 中，您可以切换按钮区域的可见性(以便您可以看到每个按钮都被剪裁在正确的区域)。