Треугольники в линии HTML/CSS веб-дизайн

Question

В настоящее время я разрабатываю веб-сайт для класса, и мне трудно понять, как выровнять треугольники, чтобы образовать ромб.

Спасибо всем за помощь.

Вот эта страница:

Вот КОД:

Answer 1

Я бы посоветовал вам использовать SVG, а не элементы HTML, если это возможно. если вы ДОЛЖНЫ использовать элементы html, вы можете сделать что-то вроде следующего:

.diamond {
  position: relative;
  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 50px 0;
  border-color: transparent #007bff transparent transparent;
}
.diamond:after {
  content:'';
  position: relative;
  display:inline-block;
  top:-50px;
  left:50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 50px;
  border-color: transparent transparent transparent #007bff;
}

используется с HTML:

<div class="diamond"></div>

Код Pen