Как работают 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>

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

18   1665   2011-08-16 07:54:51

18 ответов:

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

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

borders meet at 45 degree angles, content in middle

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

no top border

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

no width

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

no height either

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

transparent side borders

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

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

Border example

jsFiddle.

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

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

.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

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

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

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

здесь анимация в 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>

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

Шаг 3JSfiddle Ссылке:

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

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

enter image description here

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

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

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

&#9650;

результат:

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

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

.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

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

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

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

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

Шаг 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/

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

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

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


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

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

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

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

enter image description here

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

1) прямоугольник треугольник

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

.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 синяя линия-это ширина divw и каждый градиент будет иметь 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>

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

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