Как сделать треугольники на чистом CSS.
Всем привет! Сегодня мы рассмотрим, как сделать треугольники на чистом CSS.
Несмотря на то, что сделать треугольники на чистом CSS довольно легко, многие люди не понимают, как же они работают. Сегодня я постараюсь подробным образом это объяснить.
Итак, сначала напишем базовую разметку и стили.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
Теперь добавим стилей.
.box {
width: 100px;
height: 100px;
margin: 0 auto;
border-top: 7px solid red;
border-left: 7px solid green;
border-right: 7px solid blue;
border-bottom: 7px solid yellow;
}
Итак, теперь откройте страницу в браузере и посмотрите, что получилось.
Вы увидите, что у нас есть блок, который прозрачен внутри, а вокруг него рамки разного цвета. Обратите внимание на углы, которые образуются на сходе этих рамок.
Теперь давайте уберем ширину и высоту
.box {
width: 0;
height: 0;
}
Теперь вы можете видеть, что у нас образовались 4 треугольника. Если нам нужен только верхний, то остальные рамки надо сделать прозрачными, чтобы их не было видно.
.box {
border-top: 7px solid red;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
}
Вот и всё! Теперь, меняя значения толщины рамок, вы можете добиться той формы треугольника, которая нужна вам.
Спасибо за внимание!
-
Создано 21.04.2015 19:00:00
-
Михаил Русаков
Комментарии (4):
"Итак, теперь откройте страницу в браузере и посмотрите, что получилось." ............................................................. Ничего не получилось. Чистая страница в браузере. Причём и при копировании, и при переписывании результат одинаковый. Открывал разными браузерами- всё равно чистая. Или у меня руки кривые, или 'надо что-то в консерватории подправить'.
Ответить
У Вас первый вариант. Можете не благодарить.
Ответить
Когда подключаем стили, нужно кое что сделать) Проверка на внимательность, у меня все получилось. Подсказка - Link и прочие))
Ответить
Благодарю :-)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.