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

есть много различных форм CSS на CSS трюки-формы 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>

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

1665
css css-shapes css3 geometry polygon

18 ответов

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

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

borders meet at 45 degree angles, content in middle

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

no top border

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

no width

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

no height either

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

transparent side borders

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

2083

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

Border example

jsFiddle.

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

487

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

.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. Теперь наша граница-дно 200px сделает наш треугольник 200px высоким.

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

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

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

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

triangular bottom border

442

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

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. Вы можете использовать любые техники (посмотреть здесь), включая использование процентов и заполнение дна для поддержания соотношения сторон и сделать отзывчивый треугольник. На следующем рисунке, 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 : давайте!--15-->

во-первых, самое главное : определите начало преобразования. The по умолчанию происхождение находится в центре псевдо-элемента, и нам это нужно в левом нижнем углу. Добавив Это в 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; на контейнере. после удаления желтой границы, вы получите... а треугольник! :

демо

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

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

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

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

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

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

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

222

здесь анимация в JSFiddle Я создал для демонстрации.

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

это анимированный GIF, сделанный из скринкаста

Animated Gif of Triangle

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

допустим, у нас есть следующий 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;
}

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

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

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

41

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

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

&#9650;

результат:

▲

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

35

рассмотрим следующий треугольник

.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

29

сделав еще один шаг, используя css на основе этого, я добавил стрелки на спину и кнопки next (да, я знаю, что это не 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>
27

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

16

ОК этот треугольник будет создан из-за того, как границы элементов работают вместе в 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

13

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

Шаг 1:

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

2 triangles

.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

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

enter image description here

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

9

в CSS clip-path

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

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

вырезка, с clip-path свойство, сродни вырезанию фигуры (например, круга или пятиугольника) из прямоугольного листа бумаги. Свойство принадлежит к "модуль маскировки CSS Уровень 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, а также начать создавать свой собственный.

9

Sass (SCSS) треугольник mixin

Я написал это, чтобы упростить (и высушить) автоматическое создание треугольника 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);
}

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

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

8

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

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

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

enter image description here

5

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

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

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 50%,red 0);
  
  /*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, etc. В этом случае мы можем получить любую форму треугольника, сохраняя ее отзывчивой.

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 50%,red 0);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 50%,red 0);
  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 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:50.9% 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).

enter image description here

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

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

поэтому нам нужно полагаться на cacl() для того, чтобы сделать наш расчет и получить необходимый результат:

.tri {
  --w:100px;
  width:var(--w);
  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:calc(var(--w)/2 + 0.5%)  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>

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>

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

enter image description here

давайте 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 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);

  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));
  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: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>
4

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

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

3

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