kGrozdanovski kGrozdanovski - 5 months ago 23
CSS Question

CSS Bootstrap Glyphicon alignment issue

I have been attempting to create a website as the one sketched in the attached image, with the colored triangles being buttons and the rest just dummy icons.

enter image description here

For that purpose I have been using Bootstrap's glyphicons (v3 - which are represented as an icon-font). The problem is that the icons fall out of alignment when I use the transform: rotate() function.



.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>





So far I have attempted using transform-origin (as suggested and solved on other stackoverflow questions) as well as many other approaches that involve changing the HTML structure however with no luck. I either dont rotate the triangles, rotate the triangles but loose alignment (some higher some lower) or as in the included code - get rotated triangles however in a single vertical column.

I would like to know how to align the icons so that they are with the same top and bottom. Also I would accept a suggestion for an entirely new approach.
Thank you all in advance.

Answer

Delete transform-origin and move up triangles.

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

CODEPEN