Всем привет! Сегодня рассмотрим, как сделать треугольники на чистом 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;
}
Вот и всё! Теперь, меняя значения толщины рамок, вы можете добиться той формы треугольника, которая нужна вам.
Спасибо за внимание!
