CSS Bootstrap Glyphicon对齐问题

Question

我一直在尝试创建一个网站，如附图所示，其中彩色三角形为按钮，其余为虚拟图标。

为此我一直在使用Bootstrap的glyphicons（v3 - 用图标字体表示）。问题是当我使用transform：rotate（）函数时，图标会不对齐。

.trianglewrapper {
  text-align: center;
  letter-spacing: -100px !important;
}
.triangle {
  display: inline-block;
}
.down {
  transform: rotate(90deg);
}
.up {
  transform: rotate(-90deg);
}
.down,
.up {
  -webkit-transform-origin: 50% 40%;
  transform-origin: 50% 40%;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
@media only screen and (max-width: 2000px) {
  .triangle {
    font-size: 400px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="trianglewrapper">
  <div class="triangle down">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle up">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle down blue">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle up red">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle down">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle up">
    <span class="glyphicon glyphicon-play"></span>
  </div>
</div>

到目前为止，我尝试使用transform-origin（如其他stackoverflow问题所建议和解决的）以及涉及更改HTML结构的许多其他方法，但没有运气。我要么不要旋转三角形，要么旋转三角形但是松散对齐（有些高一些更低）或者在包含的代码中 - 然后在单个垂直列中获得旋转三角形。

我想知道如何对齐图标，使它们具有相同的顶部和底部。我也接受一种全新方法的建议。 提前谢谢大家。

Answer 1

删除transform-origin并移动up个三角形。

.up {
  position: relative;
  left: 70px;
  top: 125px;
}

的 CODEPEN