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

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

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

здесь страницы:

Веб-Страницы

вот код:

HTML-код
CSS код pg1
код CSS pg2
CSS код pg3

13
задан Ahkil Jackson
05.02.2023 8:46
Распечатать страницу

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>

Код Ручка

0
отвечен ttaylor1218 2023-02-06 16:34

Ваш ответ

Опубликуйте как Гость или авторизуйтесь

Имя
Вверх