• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать треугольники на чистом CSS (Как самостоятельно создать треугольники на CSS)
Как сделать треугольники на чистом CSS
Kosten
Дата: Среда, 2019-02-20, 00:10 | Сообщение 1
Администраторы
Сообщений:23411
Награды: 56


Если кто не знает, как можно создать треугольники по разную сторону, то вероятна эта тема вас заинтересует. Плюс в том, что все можно создать не сложно, и как вам нужно в любом оформление и безусловно поставить высоту и ширину. Если говорить про уровень сложности, то он самый простой, который можно применить на сайте в плане дизайна.

На интернет ресурсах часто бывает много треугольников. Если вы измените треугольник на изображение, вы можете получить к нему доступ через src тега img или URL-адрес в фоновом режиме. Это не очень хорошо с точки зрения производительности интерфейса. Не волнуйтесь, давайте посмотрим на треугольник, с которым я столкнулся. Как показано ниже, есть сплошные треугольники, полые и маленькие стрелки, которые можно классифицировать как треугольники.

Изначально создаем блок div, где не указываем ширины и высоты:

1. Вариант: Вид вниз



HTML

Код
<div class="sazeraqu-mopdsaneg"></div>


CSS

Код
.sazeraqu-mopdsaneg {
    border: 50px solid rgba(0, 0, 0, 0);
    border-top: 50px solid #133e88;
    display: inline-block;
}

Демонстрация

Второй вариант: Вид влево



HTML

Код
<div class="cogmerce-dsaneg"></div>


CSS

Код
.cogmerce-dsaneg {
    border: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid #124e77;
    display: inline-block;
}


Третий вариант: Вид вправо



HTML

Код
<div class="kingdsan-gsaospekad"></div>


CSS

Код
.kingdsan-gsaospekad {
    border: 50px solid rgba(0, 0, 0, 0);
    border-left: 50px solid #123367;
    display: inline-block;
}

На первый треугольник идет demo страница, что остальные проверены на работоспособность.

Также вашему вниманию видео урок:



Как создать подсказку, где будет применяться этот треугольник, то все описано в этой теме, где аналогично предоставлена демонстрация для подсказки, что аналогичным способом применена стилистика, где часть CSS изначально идет от треугольника, который в этой статье прописан.
Прикрепления: 1813200.png(0.5 Kb) · 1903172.png(1.3 Kb) · 8811567.png(0.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать треугольники на чистом CSS (Как самостоятельно создать треугольники на CSS)
  • Страница 1 из 1
  • 1
Поиск: