Если кто не знает, как можно создать треугольники по разную сторону, то вероятна эта тема вас заинтересует. Плюс в том, что все можно создать не сложно, и как вам нужно в любом оформление и безусловно поставить высоту и ширину. Если говорить про уровень сложности, то он самый простой, который можно применить на сайте в плане дизайна.
На интернет ресурсах часто бывает много треугольников. Если вы измените треугольник на изображение, вы можете получить к нему доступ через 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 изначально идет от треугольника, который в этой статье прописан.
