В CSS Tricks есть множество различных форм CSS - Формы CSS, и я особенно озадачен треугольником:

#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>

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

CSS Triangles: трагедия в пяти действиях

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

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

Тогда вы даете ему ширину 0 ...

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

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

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

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

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

Посмотрите на jsFiddle .

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

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

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

что дает вам это :

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

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

и мы получим это :

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

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

наконец мы получаем это :

Другой подход:

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

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

• Ссылка на анимацию: Как сделать треугольник CSS3 .
• И DEMO: CSS3 треугольники, сделанные с помощью transform rotate.

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

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

ШАГ 1: Сделать Div

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

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

На данный момент у нас есть этот 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);

На данный момент у нас есть этот 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:

.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: идти дальше ...

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

1. Сделайте их тоньше или лестнее, играя с skewX().
2. Сделайте так, чтобы они указывали влево, вправо или любое другое направление, играя с направлением преобразования и направлением вращения.
3. Сделайте некоторые отражения со свойством 3D-преобразования.
4. Дайте границы треугольника
5. Поместите изображение внутри треугольника
6. Гораздо больше ... Раскройте возможности CSS3 !

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

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

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

1. Основным недостатком является совместимость браузера , свойства 2d-преобразования поддерживаются IE9 +, и поэтому вы не можете использовать эту технику, если планируете поддерживать IE8. Смотрите CanIuse для получения дополнительной информации. Для некоторых необычных эффектов с использованием 3d-преобразований, таких как браузер отражения, поддерживается IE10 + (см. CanIuse для получения дополнительной информации).
2. Вам не нужно ничего адаптивного, и для вас подойдет простой треугольник, тогда вам следует воспользоваться техникой границы, описанной здесь: лучшая совместимость с браузером и более легкая для понимания благодаря удивительным публикациям здесь.

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

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

Это анимированный 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>

Допустим, у нас есть следующий div:

<div id="triangle" />

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

ШАГ 1: JSfiddle Link:

 #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 х 150 пикселей с границей 50 пикселей. Изображение прилагается:

ШАГ 2: JSfiddle Link:

#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;
}

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

ШАГ: 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 пикселей на ноль. Изображение прикреплено

ШАГ 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;
}

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

ШАГ 5: JSfiddle Link:

#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;
}

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

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

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

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

▲

Результат:

▲

Смотрите: что такое сущности HTML для треугольников вверх и вниз?

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

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

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

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

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

Сделав еще один шаг вперед, используя 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>

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

Поскольку мы обычно используем границы размером 1 или 2 пикселя, мы никогда не замечаем, что границы образуют углы 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>

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

Другой подход. С линейным градиентом (для 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

CSS clip-path

Я чувствую, что этот вопрос упущен; clip-path

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

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

• Выдержка из Smashing Magazine

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а также начать создавать свои собственные.

• Clippy - clip-pathгенератор
• Файл рекомендаций кандидата W3C
• clip-pathДокументация MDN
• clip-path Поддержка браузера

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

Шаг 1:

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

.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/

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

Я написал это, чтобы было проще (и СУХОЙ) автоматически генерировать треугольник 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);
}

Страница детской площадки

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

^{Если вы хотите применить границу к треугольнику, прочитайте это: Создать треугольник с помощью 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).

У нас есть два градиента, g1а g2синяя линия - это ширина, div wи каждый градиент будет иметь 50% ( w/2), и каждая сторона треугольника должна быть равна 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>

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

Давайте определим 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>

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

.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/

Другие уже объяснили это хорошо. Позвольте мне дать вам анимацию, которая объяснит это быстро: 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;
}

Если вы хотите , чтобы играть с border-size, widthи heightувидеть , как те могут создавать различные формы, попробуйте следующее:

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}

<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

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

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

<div class="triangle"></div>

Я знаю, что это старый, но я хотел бы добавить к этому обсуждению, что есть по крайней мере 5 различных методов для создания треугольника, используя только HTML и CSS.

1. С помощью borders
2. С помощью linear-gradient
3. С помощью conic-gradient
4. Использование transformиoverflow
5. С помощью clip-path

Я думаю, что все было рассмотрено здесь, кроме метода 3, с использованием conic-gradient, поэтому я поделюсь этим здесь:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>