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

359
Ahkil Jackson

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

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

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

Web Page

Вот КОД:

HTML code

CSS code pg1

CSS code pg2

CSS code pg3

-2
Привет, Акил! Возможно, вы захотите поместить код в [JSFiddle] (https://jsfiddle.net/). mcalex 6 лет назад 0
Пожалуйста, добавьте код, ошибки и данные в виде ** текста ** ([используя форматирование кода] (/ edit-help # code)), а не изображений. Изображения: A) не позволяем нам копировать и вставлять код / ​​ошибки / данные для тестирования; B) не разрешать поиск на основе кода / ошибки / содержимого данных; и [много других причин] (// meta.stackoverflow.com/a/285557). В общем код / ​​ошибки / данные в текстовом формате >>>> код / ​​ошибки / данные в виде изображения >> ничего. Изображения должны использоваться только, * в дополнение к тексту в кодовом формате *, если изображение добавляет что-то существенное, что не передается только текстовым кодом / ошибкой / данными. Makyen 5 лет назад 0

1 ответ на вопрос

0
ttaylor1218

Я бы посоветовал вам использовать 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

Похожие вопросы