• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Треугольники и уголки при помощи CSS (Делаем треугольник на CSS при помощи border)
Треугольники и уголки при помощи CSS
Kosten
Дата: Воскресенье, 2019-06-23, 08:16 | Сообщение 1
Администраторы
Сообщений:24295
Награды: 56


Попытка сделать границу треугольника или границу с треугольником внутри была одной из этих задач. Поискав в интернете, то здесь много разных способов сделать это, но все они были немного слишком сложными или не совсем соответствовали тому. Во многих статьях, с которыми сталкивался в 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.
Прикрепления: 9435082.png(0.8 Kb) · 8362937.png(1.1 Kb) · 3574921.png(1.1 Kb) · 2417272.png(1.0 Kb) · 0271583.png(0.5 Kb) · 7357509.png(0.5 Kb) · 6229723.png(0.3 Kb) · 3053277.png(0.8 Kb) · 4116421.png(1.0 Kb) · 6501633.png(1.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Треугольники и уголки при помощи CSS (Делаем треугольник на CSS при помощи border)
  • Страница 1 из 1
  • 1
Поиск: