Трикутники в лінійному веб-дизайні HTML / CSS

-2

Наразі я розробляю веб-сайт для класу, і мені важко зрозуміти, як вирівняти трикутники, щоб утворити ромб.

Дякую за допомогу усім.

Ось сторінка:

Веб-сторінка

Ось КОД

HTML-код

CSS код pg1

CSS код pg2

CSS код pg3

— Акіл Джексон
джерело

Привіт, Акіл, можливо, ви захочете ввести код у JSFiddle

— mcalex

Будь ласка, додайте код, помилки та дані як текст ( використовуючи форматування коду ), а не зображення. Зображення: A) не дозволяють нам копіювати - & - вставляти код / помилки / дані для тестування; Б) не дозволяти пошук на основі вмісту коду / помилки / даних; та багато інших причин . Загалом, код / помилки / дані у текстовому форматі >>>> код / помилки / дані як зображення >> нічого. Зображення слід використовувати, крім тексту у форматі коду , лише якщо зображення додає щось істотне, що не передається лише текстовим кодом / помилкою / даними.

— Макіен

Я б запропонував вам використовувати 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>

Код ручки

— ttaylor1218
джерело