Попытка сделать границу треугольника или границу с треугольником внутри была одной из этих задач. Поискав в интернете, то здесь много разных способов сделать это, но все они были немного слишком сложными или не совсем соответствовали тому. Во многих статьях, с которыми сталкивался в Google, предлагалось использовать два псевдоэлемента:: before и:: after, чтобы создать треугольник с другой цветовой рамкой и фоном, но для этого есть гораздо более простой способ.
Используя чистый CSS, вы можете создавать кросс-браузеры совместимые треугольники с очень небольшим количеством кода. Секрет этих треугольников заключается в создании гигантских границ с двух перпендикулярных сторон направления, в котором вы бы хотели, чтобы треугольник указывал.
Сделайте границу противоположной стороны одинакового размера с цветом фона того цвета, который вы бы хотели видеть во всплывающей подсказке.
Все создается не так сложно, где все происходит через комбинацию разной ширины border.
CSS
Код
border-top: 25px solid rgb(97, 236, 130);
border-bottom: 25px solid rgb(114, 147, 168);
border-right: 25px solid aqua;
border-left: 25px solid green;
width: 0;
height: 0;
Таким образом, если сделать некоторые стороны прозрачными, можно получать разные виды треугольничков.
Треугольник влево
Как пример:
HTML
Код
<div class="corner" style="border: 30px solid transparent; border-right: 43px solid #ff4400; display: block; width: 0; height: 0;"></div>
Аналогично закрепляем в CSS:
CSS
Код
border: 30px solid transparent;
border-right: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;
Приплющенный треугольник влево
Код
border: 30px solid transparent;
border-right: 30px solid aqua;
display: block;
width: 0;
height: 0;
Вытянутый треугольник влево
Код
border: 30px solid transparent;
border-right: 80px solid aqua;
display: block;
width: 0;
height: 0;
Прямоугольный треугольник прямой угол влево
Код
border: 30px solid transparent;
border-left: 30px solid aqua;
border-bottom: 30px solid aqua;
display: block;
width: 0;
height: 0;
Приплющенный треугольник прямой угол влево
Код
border: 40px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 80px solid rgb(119, 39, 32);
Вытянутый треугольник прямой угол влево
Код
border: 40px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 20px solid rgb(119, 39, 32);
Соответственно, аналогичные треугольники в другие стороны делаются по тому же принципу, просто меняем сторону с цветным border.
Треугольник вправо
Код
border: 30px solid transparent;
border-left: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;
Треугольник вниз
Код
border: 30px solid transparent;
border-top: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;
Треугольник вверх
Код
border: 30px solid transparent;
border-bottom: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;
Как видим, при поддержки стилистики создаем уголки для всплывающих подсказок. Если решите прикрепить или закрепить треугольник к основанию блока, то безусловно все можно сделать, а это воспользоваться псевдоэлементами :before или :after.
