Треугольник средствами CSS

В данной статье приведены интересные варианты, как можно сделать треугольник средствами CSS.


Треугольники и уголки с помощью CSS
Делать уголки с помощью свойства border очень удобно – не нужно рисовать картинки в графическом редакторе, и вы всегда можете легко изменить параметры фигуры.
Делается все очень просто – через комбинацию разной ширины border. Чтобы понять, как это работает, достаточно создать пустой элемент нулевой ширины и высоты с толстой обводкой разного цвета с каждой стороны.

CSS этого элемента:

1
2
3
4
5
6
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;

Таким образом, если сделать некоторые стороны прозрачными, можно получать разные виды треугольничков.

Треугольник влево

Равносторонний треугольник влево

1
2
3
4
5
border: 30px solid transparent;
border-right: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;

Приплющенный треугольник влево

1
2
3
4
5
border: 30px solid transparent;
border-right: 30px solid aqua;
display: block;
width: 0;
height: 0;

Вытянутый треугольник влево

1
2
3
4
5
border: 30px solid transparent;
border-right: 80px solid aqua;
display: block;
width: 0;
height: 0;

Прямоугольный треугольник прямой угол влево

1
2
3
4
5
6
border: 30px solid transparent;
border-left: 30px solid aqua;
border-bottom: 30px solid aqua;
display: block;
width: 0;
height: 0;

Приплющенный треугольник прямой угол влево

1
2
3
4
border: 40px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 80px solid rgb(119, 39, 32);

Вытянутый треугольник прямой угол влево

1
2
3
4
border: 40px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 20px solid rgb(119, 39, 32);

Соответственно, аналогичные треугольники в другие стороны делаются по тому же принципу, просто меняем сторону с цветным border.

Треугольник вправо

1
2
3
4
5
border: 30px solid transparent;
border-left: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;

Треугольник вниз

1
2
3
4
5
border: 30px solid transparent;
border-top: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;

Треугольник вверх

1
2
3
4
5
border: 30px solid transparent;
border-bottom: 43px solid rgb(255, 68, 0);
display: block;
width: 0;
height: 0;

Таким образом можно делать уголки для всплывающих подсказок и еще много красивостей. Чтобы прикрепить треугольник к блоку, можно воспользоваться псевдоэлементами :before или :after.

Popup с уголком слева

Стили этого всплывающего окна:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.popup-left-corner {
   background: rgb(173, 208, 247);
   border-radius: 5px;
   -moz-border-radius: 5px;
   position: relative; /* !!! */
   padding: 5px;
   margin-left: 9px;
   width: 300px;
   text-align: center;
   box-shadow: 1px 1px 3px 0px black;
}
 
.popup-left-corner:before {
   content: '';
   border: 10px solid transparent;
   border-right: 10px solid rgb(173, 208, 247);
   position: absolute;
   left: -20px;
   top: 50%;
   margin-top: -10px;
}

Псевдоэлемент :before, в котором находится стрелочка, спозиционирован абсолютно, отрицательный left сдвигает его на его ширину, чтобы выйти за рамки основного блока, позиция top дает отступ в 50% от высоты блока, а отрицательный margin-top отодвигает вверх на половину его высоты, чтобы стрелочка стояла всегда ровно по центру по вертикали.


Popup с уголком справа

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.popup-right-corner {
   background: rgb(231, 191, 230);
   border-radius: 5px;
   -moz-border-radius: 5px;
   position: relative;
   padding: 5px;
   margin-left: 9px;
   width: 300px;
   text-align: center;
   box-shadow: 0px 1px 3px 1px rgb(171, 141, 141);
}
 
.popup-right-corner:after {
   content: '';
   border: 8px solid transparent;
   border-left: 9px solid rgb(231, 191, 230);
   position: absolute;
   right: -17px;
   top: 50%;
   margin-top: -8px;
}

Popup уголок сверху

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.popup-top-corner {
   background: rgb(200, 200, 200);
   border-radius: 5px;
   border-top: 3px solid rgb(145, 27, 54);
   -moz-border-radius: 5px;
   position: relative;
   padding: 5px;
   width: 300px;
   text-align: center;
   margin-top: 10px;
}
 
.popup-top-corner:before {
   content: '';
   border: 12px solid transparent;
   border-bottom: 12px solid rgb(145, 27, 54);
   position: absolute;
   left: 50%;
   margin-left: -12px;
   top: -27px;
   width: 0;
}

Popup уголок снизу

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.popup-bottom-corner {
   background: rgb(190, 231, 209);
   border-radius: 5px;
   -moz-border-radius: 5px;
   position: relative;
   padding: 5px;
   width: 300px;
   text-align: center;
   margin-bottom: 10px;
}
 
.popup-bottom-corner:after {
   content: '';
   border: 12px solid transparent;
   border-top: 12px solid rgb(190, 231, 209);
   position: absolute;
   left: 50%;
   margin-left: -12px;
   bottom: -24px;
   width: 0;
}

Треугольник с обводкой

Для создания треугольника с обводкой используем уже два псевдоэлемента – :before и :after.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
   .popup-duble-corner {
   background: rgb(191, 192, 245);
   border: 3px solid rgb(114, 71, 148);
   border-radius: 5px;
   -moz-border-radius: 5px;
   position: relative;
   padding: 5px;
   width: 300px;
   text-align: center;
   margin-bottom: 10px;
}
 
.popup-duble-corner:after,
.popup-duble-corner:before {
   content: '';
   border: solid transparent;
   position: absolute;
   left: 50%;
   margin-left: -12px;
   bottom: -27px;
   width: 0;
}
.popup-duble-corner:before {
   border-top-color: rgb(114, 71, 148);
   border-width: 12px;
}
.popup-duble-corner:after {
   border-top-color: rgb(191, 192, 245);
   border-width: 16px;
   margin-left: -16px;
}

 

Ну и конечно же, комбинацией псевдоэлементов :before и :after можно сделать много всяких красивых стрелочек (главное, не забывать ставить position: relative для родительского элемента, чтобы псевдоэлементы не уехали):

Мы все без backgrounda!
Как видите, все достаточно просто! А использование css3-свойств в сочетании с псевдоэлементами еще больше расширяет возможности «бескартиночного» оформления сайта.

6 thoughts on “Треугольник средствами CSS

  • 17.12.2015 в 07:34
    Permalink

    А как можно сделать треугольник, так чтоб он не был весь окрашен в один цвет?

    Ответить
    • 08.06.2016 в 09:43
      Permalink

      Двумя фигурами — квадрат повернутый на 45% и прямоугольник (конверт получается). Вот эти фигуры и образуют треугольник «бордером»…. сто раз подумай, нужно ли заморачиваться, будет ли это потом оценено …
      да, еще можно просто один треугольник поместить на треугольник большего размера и другого цвета.
      Как по мне, так лучше в .png это пока делать, если загрузится — все увидят то, что вы хотели показать

      Ответить
      • 16.06.2016 в 23:23
        Permalink

        Согласимся. Но здесь просто вопрос, кому в чем (и для чего, для каких целей) удобнее делать 🙂

        Ответить
  • 26.03.2017 в 13:50
    Permalink

    а почему нужно с нулевыми параметрами?Это нельзя осуществить так, чтоб туда текст помещался?

    Ответить
  • 04.08.2017 в 01:06
    Permalink

    Спасибо, только с вашим разъяснением получилось)

    Ответить

Добавить комментарий для ktvdru Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *