Как работают треугольники CSS?

В , и я особенно озадачен треугольником:

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

Как и почему это работает?

+1777
16 авг. '11 в 3:54
источник поделиться
19 ответов

CSS Треугольники: трагедия в пяти действиях

Как сказал alex, границы одинаковой ширины торчат друг против друга под углом 45 градусов:

borders meet at 45 degree angles, content in middle

Когда у вас нет верхней границы, это выглядит так:

no top border

Затем вы даете ему ширину 0...

no width

... и высотой 0...

no height either

... и, наконец, вы делаете две стороны прозрачными:

transparent side borders

Это приводит к треугольнику.

+2191
16 авг. '11 в 4:11
источник

Границы используют угловой край, где они пересекаются (угол 45 ° с равными границами ширины, но изменение ширины границы может исказить угол).

Border example

jsFiddle.

Скрывая определенные границы, вы можете получить эффект треугольника (как вы можете видеть выше, делая разные части разными цветами). transparent часто используется как цвет края для достижения формы треугольника.

+504
16 авг. '11 в 3:58
источник

Начните с базового квадрата и границ. Каждая граница будет иметь другой цвет, поэтому мы можем рассказать им обособленно:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

который дает вам это:

square with four borders

Но нет необходимости в верхней границе, поэтому установите ее ширину на 0px. Теперь наш border-bottom 200px сделает наш треугольник 200px высоким.

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

и мы получим this:

bottom half of square with four borders

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

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

наконец, мы получим this:

triangular bottom border

+470
17 авг. '11 в 11:16
источник

Разный подход:

треугольники CSS3 с поворотом вращения

Треугольная форма довольно легко сделать с использованием этой техники. Для людей, которые предпочитают видеть анимацию, объясняющую, как эта техника работает здесь, это:

gif animation : how to make a triangle with transform rotate

В противном случае здесь приводится подробное объяснение в 4 действиях (это не трагедия) о том, как сделать равнобедренный прямоугольный треугольник с одним элементом.

  • Примечание 1: для не равнобедренных треугольников и причудливых вещей вы можете увидеть шаг 4.
  • Примечание 2: в следующих фрагментах префиксы поставщиков не включены. они включены в демоны codepen.
  • Примечание 3: HTML для следующего объяснения всегда: <div class="tr"></div>

ШАГ 1: Сделайте div

Просто убедитесь, что width = 1.41 x height. Вы можете использовать любой techinque (см. Здесь), в том числе использование процентных значений и padding-bottom для поддержания соотношения сторон и создания чувствительного треугольника. На следующем изображении div имеет золотую желтую границу.

В этом div вставьте псевдоэлемент и дайте ему 100% ширину и высоту родительского. Псевдоэлемент имеет синий фон на следующем изображении.

Making a CSS triangle with transform roate step 1

В этот момент у нас есть этот CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

ШАГ 2:. Поверните

Во-первых, самое главное: определить происхождение преобразования. начало по умолчанию находится в центре псевдоэлемента, и мы нуждаемся в нем в левом нижнем углу. Добавив этот CSS в псевдоэлемент:

transform-origin:0 100%; или transform-origin: left bottom;

Теперь мы можем вращать псевдоэлемент 45 градусов по часовой стрелке с помощью transform : rotate(45deg);

Creating a triangle with CSS3 step 2

В этот момент у нас есть этот CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

ШАГ 3: скрыть его

Чтобы скрыть нежелательные части псевдоэлемента (все, что переполняет div с желтой рамкой), вам просто нужно установить overflow:hidden; на контейнер. после удаления желтой границы вы получите... ТРЕУГОЛЬНИК!

DEMO

CSS triangle

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

ШАГ 4: идите дальше...

Как показано в демонстрации вы можете настроить треугольники:

  • Сделайте их более тонкими или более плоскими, играя с skewX().
  • Сделайте так, чтобы они указывали влево, вправо или в любом другом направлении, играя с направлением преобразования и поворота.
  • Сделайте некоторое отражение с трёхмерным преобразованием.
  • Дайте границы треугольника
  • Поместите изображение внутри треугольника
  • Гораздо больше... Освободите полномочия CSS3!

Зачем использовать этот метод?

  • Треугольник может легко реагировать.
  • Вы можете сделать треугольник с рамкой.
  • Вы можете сохранить границы треугольника. Это означает, что вы можете активировать состояние зависания или событие click, только когда курсор внутри треугольника. Это может стать очень удобным в некоторых ситуациях, таких как этот, где каждый треугольник не может наложить его на соседей, чтобы каждый треугольник имел собственное состояние зависания.
  • Вы можете сделать некоторые фантастические эффекты, такие как отражения.
  • Это поможет вам понять свойства преобразования 2d и 3d.

Почему бы не использовать эту технику?

  • Основным недостатком является совместимость браузера, свойства преобразования 2d поддерживаются IE9 +, и поэтому вы не можете использовать эту технику, если планируете поддерживать IE8. Для получения дополнительной информации см. CanIuse. Для некоторых причудливых эффектов с использованием 3D-преобразований, таких как поддержка отражения поддерживается IE10 + (см. canIuse для получения дополнительной информации).
  • Вам не нужно ничего отзывчивого, и простой треугольник подходит для вас, тогда вы должны пойти на описанную здесь технику границы: лучше совместимость с браузером и легче понять, благодаря сообщениям о amaizing здесь.
+250
17 июл. '14 в 16:30
источник

Вот анимация в JSFiddle, которую я создал для демонстрации.

Также см. ниже фрагмент.

Это Анимированный GIF, сделанный из Screencast

Анимированный Gif Треугольника

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Случайная версия

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Все сразу версия

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>
+179
29 нояб. '11 в 11:21
источник

Допустим, что мы имеем следующий div:

<div id="triangle" />

Теперь измените CSS поэтапно, так что вы получите четкое представление о том, что происходит вокруг

ШАГ 1: ссылка JSfiddle:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

Это простой div. С очень простым CSS. Так что непрофессионал может понять. Div имеет размеры 150 x 150 пикселей с границей 50 пикселей. Изображение прилагается:

enter image description here

ШАГ 2: ссылка JSfiddle:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

Теперь я просто изменил пограничный цвет всех четырех сторон. Изображение прикреплено.

enter image description here

ШАГ: 3 ссылка JSfiddle:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

Теперь я просто изменил высоту и ширину div от 150 пикселей до нуля. Изображение прикреплено

enter image description here

ШАГ 4: JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

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

enter image description here

ШАГ 5: ссылка JSfiddle:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

Теперь я просто изменил цвет фона на белый. Изображение прикреплено.

enter image description here

Следовательно, мы получили необходимый нам треугольник.

+48
17 июн. '14 в 6:09
источник

А теперь что-то совсем другое...

Вместо использования трюков css не забывайте о решениях так же просто, как html-объекты:

&#9650;

Результат:

Смотрите: Что представляют собой объекты HTML для треугольников вверх и вниз?

+38
01 дек. '14 в 12:40
источник

Рассмотрим ниже треугольник

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

Это то, что нам дано:

Small triangle output

Почему это получилось в этой форме? На приведенной ниже диаграмме объясняются размеры, обратите внимание, что 15px использовался для нижней границы, а 10px использовался для левого и правого.

Large triangle

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

Right angle triangle

+31
21 мар. '13 в 11:20
источник

Сделав еще один шаг, используя css на основе этого, я добавил стрелки в свою спину и следующие кнопки (да, я знаю, что это не 100% кросс-браузер, но, тем не менее, пятно).

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}
<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>
+29
30 дек. '11 в 16:56
источник

Разный подход. С линейным градиентом (для IE только IE 10+). Вы можете использовать любой угол:

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}
<div class="triangle"></div>

Вот jsfiddle

+18
26 июл. '13 в 0:19
источник

ОК, этот треугольник будет создан из-за того, как границы элементов работают вместе в HTML и CSS...

Поскольку мы обычно используем границы 1 или 2px, мы никогда не замечаем, что границы имеют угол 45 ° друг к другу с одинаковой шириной, и если ширина изменяется, степень угла также изменяется, запустите код CSS, который я создал ниже:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Затем на следующем шаге у нас нет ширины и высоты, что-то вроде этого:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

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

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div class="triangle"></div>

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

enter image description here

+18
17 июн. '17 в 4:04
источник

CSS clip-path

Это то, что я чувствую, что этот вопрос пропустил; clip-path

clip-path в двух словах

Обрезание с помощью свойства clip-path сродни разрезанию фигуры (например, круга или пятиугольника) из прямоугольного листа бумаги. Свойство принадлежит спецификации CSS Masking Module Level 1 ". Спецификация заявляет:" Маскировка CSS предоставляет два средства для частичного или полного скрытия частей визуальных элементов: маскирование и обрезка ".


clip-path будет использовать сам элемент, а не его границы, чтобы вырезать фигуру, указанную в параметрах. В нем используется супер простая процентная система координат, которая упрощает ее редактирование и означает, что вы можете забрать ее и создать странные и прекрасные формы за считанные минуты.


Пример формы треугольника

div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}
<div></div>

Даунсайд

В настоящий момент у него есть существенный недостаток: одна из них - большая нехватка поддержки, только на самом деле распространяется в браузерах -webkit- и не имеет поддержки IE и только очень частично в FireFox.


Ресурсы

Вот некоторые полезные ресурсы и материалы, чтобы лучше понять clip-path, а также начать создавать свои собственные.

+13
09 мар. '16 в 16:10
источник

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

Шаг 1:

Позволяет создать 2 треугольника, для второго мы будем использовать псевдо-класс :after и расположим его чуть ниже другого:

2 треугольника

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

Шаг 2

Теперь нам просто нужно установить преобладающий цвет границы второго треугольника на тот же цвет фона:

введите описание изображения здесь

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

Скриншот со всеми стрелками:
http://jsfiddle.net/tomsarduy/r0zksgeu/

+11
31 июл. '15 в 20:42
источник

Треугольный смеситель SASS (SCSS)

Я написал это, чтобы упростить (и DRY) автоматическое создание треугольника CSS:

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either 'top', 'right', 'bottom' or 'left'
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

пример использования:

span {
  @include triangle(bottom, red, 10px);
}

Игровая площадка


Важная заметка:
если треугольник кажется пиксельным в некоторых браузерах, попробуйте один из способов, описанных здесь.

+9
27 мая '15 в 19:55
источник

Если вы хотите применить границу к треугольнику, прочитайте это: Создать треугольник с помощью CSS?

Почти все ответы сосредоточены на треугольнике, построенном с использованием границ, поэтому я собираюсь разработать метод linear-gradient (как и началось в ответе @lima_fil).

Использование значения градуса, такого как 45°, заставит нас соблюдать определенное соотношение height/width, чтобы получить желаемый треугольник, и это не будет отзывчивым:

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*To illustrate*/
  border:1px solid;
}
Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

Вместо того, чтобы делать это, мы должны рассмотреть предопределенные значения направления, например, to bottom, to top и т.д. В этом случае мы можем получить любой вид треугольника, сохраняя его отзывчивость.

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

Чтобы получить такой треугольник, нам нужен один линейный градиент и диагональное направление, например, to bottom right, to top left, to bottom left и т.д.

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}
<div class="tri-1"></div>
<div class="tri-2"></div>

2) равнобедренный треугольник

Для этого нам понадобятся 2 линейных градиента, как указано выше, и каждый из них займет половину ширины (или высоты). Это как мы создаем зеркальное отображение первого треугольника.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}
<div class="tri"></div>

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

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

Чтобы упростить это, мы будем считать, что ширина нашего div известна, а высота достаточно велика, чтобы можно было нарисовать наш треугольник внутри (height >= width).

CSS triangle with gradient

Мы имеем два наших градиент g1 и g2, синяя линия ширина div w и каждый градиент будет иметь 50% от него (w/2), и каждая сторона треугольника sould быть равна w. Зеленая линия - высота обоих градиентов hg и мы можем легко получить формулу ниже:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w

Мы можем положиться на calc(), чтобы выполнить наш расчет и получить нужный результат:

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}
<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

Другой способ - контролировать высоту div и сохранять синтаксис градиента легким:

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}
<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

4) Случайный треугольник

Чтобы получить случайный треугольник, это легко, так как нам просто нужно удалить условие 50% каждого из них, НО мы должны сохранить два условия (оба должны иметь одинаковую высоту, а сумма обоих значений ширины должна составлять 100%).

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}
<div class="tri-1"></div>

Но что, если мы хотим определить значение для каждой стороны? Нам просто нужно сделать расчет еще раз!

CSS triangle with gradient

Давайте определим hg1 и hg2 как высоту нашего градиента (оба равны красной линии), а затем wg1 и wg2 как ширину нашего градиента (wg1 + wg2 = a). Я не буду вдаваться в подробности расчетов, но в конце мы получим:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

Теперь мы достигли предела CSS, так как даже с calc() мы не сможем реализовать это, поэтому нам просто нужно собрать конечный результат вручную и использовать его как фиксированный размер:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}
<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

бонус

Мы не должны забывать, что мы также можем применять вращение и/или наклон, и у нас есть больше возможностей, чтобы получить больше треугольника:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}
<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

И, конечно, мы должны иметь в виду решение SVG, которое может быть более подходящим в некоторых ситуациях:

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}
<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>
+8
06 апр. '18 в 15:24
источник

вот еще одна скрипка:

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

+4
06 мар. '15 в 16:54
источник

Другие уже объяснили это хорошо. Позвольте мне дать вам анимацию, которая будет объяснять это быстро: http://codepen.io/chriscoyier/pen/lotjh

Вот вам какой-то код для игры и изучения понятий.

HTML:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

Играйте с этим и посмотрите, что произойдет. Установите высоту и ширину в ноль. Затем удалите верхнюю границу и сделайте левую и правую прозрачными или просто посмотрите на код ниже, чтобы создать треугольник css:

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}
+4
14 дек. '15 в 2:05
источник

Я сделал образец в enjoycss

http://enjoycss.com/5p#border

вы можете поиграть с ним и посмотреть, как изменится вещь;)

enter image description here

+3
12 янв. '14 в 15:13
источник

Попробуйте это: -

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class="triangle"></div>

0
20 сент. '19 в 10:52
источник

Посмотрите другие вопросы по меткам или Задайте вопрос