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

Question

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

1675

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

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

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

Stanislav Shabalin 16 авг. 2011, в 05:00

Источник

57

Вы можете: jsfiddle.net/wbZet
mskfisher 16 авг. 2011, в 12:40
52

Как насчет площади, которой там нет? jsfiddle.net/minitech/sZgaa
Ry-♦ 16 авг. 2011, в 16:31
1

@mskfisher Размер нижней границы вашего равностороннего треугольника не должен быть ceil (sqrt (3) * 60)? Еще несколько пикселей!
Niloct 17 авг. 2011, в 12:22
1

@Niloct: я быстро посмотрел на круглые числа. Вы правы, более точные равносторонние измерения были бы (сторона: 58, низ: 100) или (сторона: 60, низ: 104).
mskfisher 17 авг. 2011, в 12:41
1

Вот отличный генератор треугольников CSS для всех направлений и размеров: apps.eky.hk/css-triangle-generator
Allan Stepps 07 март 2014, в 23:40
0

Обратите внимание, что в IE8 поддерживаются следующие фигуры (из css-tricks.com/examples/ShapesOfCSS ): квадрат, прямоугольник, все треугольники, трапеция, звезда (6 точек), пятиугольник, шестиугольник, восьмиугольник, алмазный квадрат, алмазный щит, бриллиант узкий, ограненный бриллиант. Примечание: я проверял это на browserstack.com
Adrien Be 08 авг. 2014, в 08:22
0

Эта анимация также чрезвычайно полезна для понимания этого: css-tricks.com/animation-css-triangles-work
merlinpatt 04 март 2016, в 04:21
0

w3schools.com/css/css_tooltip.asp
crh225 10 окт. 2017, в 14:39

Показать ещё 6 комментариев

Теги:

css

css3

geometry

css-shapes

polygon

18 ответов

463

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

jsFiddle.

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

alex 16 авг. 2011, в 04:30

442

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

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

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

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

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

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

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

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

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

Mouna Cheikhna 17 авг. 2011, в 12:59

21

Круто, но это не так же? :-)
Stanislav Shabalin 17 авг. 2011, в 11:33
5

There's another way to draw .. , который оказывается таким же образом :) Хотя хорошее объяснение
Hammad Khan 17 авг. 2011, в 19:21
16

-1 для использования JPEG с массивными артефактами. Но +1 за создание отличного примера того, когда не следует использовать JPEG-файлы, на которые я могу ссылаться в будущем для сдерживания. ;)
Henrik Heimbuerger 18 авг. 2011, в 08:24
3

почему здесь не используется GIF?
prusswan 07 дек. 2011, в 08:37
4

Извините, @hheimbuerger, я испортил ваш пример, исправив изображения. В будущем вам нужно будет сослаться на редакцию 2 этого ответа .
Rory O'Kane 15 авг. 2012, в 20:05
0

Я очень поддерживаю подобные примеры сообщений, @Rory. ;) Спасибо, теперь это выглядит намного лучше!
Henrik Heimbuerger 17 авг. 2012, в 16:37
0

Хотя концептуально это совпадает с ответом sdleihssirhc, я считаю, что это лучший ответ на этот вопрос.
rexford 17 сен. 2014, в 08:27

Показать ещё 5 комментариев

212

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

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

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

Ссылка на ANIMATION: Как сделать треугольник CSS3.
И DEMO: треугольники CSS3, сделанные с преобразованием вращения.

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

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

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

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

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

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

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

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

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

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

web-tiki 17 июль 2014, в 17:37

15

Вероятно, стоит упомянуть, что 1.41 - это приближение √2 и длины гипотенузы создаваемого вами треугольника, поэтому вам нужна (как минимум) эта ширина.
KRyan 05 фев. 2015, в 16:24
0

Я хотел, чтобы ответ был простым, но вы правы, стоит упомянуть @KRyan
web-tiki 05 фев. 2015, в 17:02
0

На самом деле, при попытке использовать это, было бы полезно упомянуть, как были получены различные ширины для использования с skewX .
KRyan 05 фев. 2015, в 17:06
1

Этот метод работает лучше, когда вам нужна сплошная граница 1px для треугольника.
Roman Losev 06 апр. 2016, в 06:40
3

Вау для этой анимированной графики. Настоящий пример картины может сказать 1000 слов!
Gaurav Ramanan 15 фев. 2017, в 17:12
0

Это для случая, когда вы хотите создать границы для треугольника, я застрял на пути границ, когда я хочу создать это поле аннотации AnnotationBox
vanduc1102 04 апр. 2017, в 15:56
0

Привет. Потрясающее решение. Я хотел бы знать математику для всего этого. Мне нужен более короткий треугольник, и я не уверен, как его достичь: / Я видел вашу демонстрацию, охватывающую множество вариантов, но не мог понять общую математику каждого решения. Под этим я подразумеваю связь между свойствами skew, rotate и padding-bottom.
banzomaikaka 05 янв. 2018, в 11:12
0

Привет @banzomaikaka Я не был так далеко в расчетах. У меня не было необходимости вычислять точные размеры треугольника, и я использовал только метод проб / ошибок для проектирования плоских или высоких треугольников. У меня не будет времени, чтобы сделать это сейчас, но если вам удастся определить взаимосвязь между свойствами, пожалуйста, дайте мне знать.
web-tiki 08 янв. 2018, в 10:27
0

Привет @ веб-тики. Нет проблем. В любом случае, спасибо;) Если я это сделаю, я вернусь сюда.
banzomaikaka 08 янв. 2018, в 17:57

Показать ещё 7 комментариев

163

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

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

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

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>

HerrSerker 29 нояб. 2011, в 12:08

39

Допустим, что мы имеем следующий 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 пикселей. Изображение прилагается:

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

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

ШАГ: 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:

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

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

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

Rai Ammad Khan 17 июнь 2014, в 07:28

34

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

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

&#9650;

Результат:

▲

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

user133408 01 дек. 2014, в 13:43

2

Я не думаю, что "избит" является подходящим словом здесь. Решение основывается на показателях шрифта, поэтому точное позиционирование весьма сомнительно, не говоря уже о том, что вы не можете контролировать форму.
user776686 19 май 2017, в 13:40

30

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

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

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

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

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

Daniel Imms 21 март 2013, в 12:38

28

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

PseudoNinja 30 дек. 2011, в 17:01

1

как это не кросс браузер? треугольники должны работать обратно в IE6.
chriscauley 30 дек. 2011, в 19:58
4

использование: before и: after не поддерживается на 100%.
PseudoNinja 30 дек. 2011, в 20:47
2

Псуэдо-элементы не поддерживаются <IE8.
alex 14 фев. 2012, в 22:49

Показать ещё 1 комментарий

16

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

lima_fil 26 июль 2013, в 02:06

0

Это красивое решение, но следует отметить, что это только IE 10+.
Eric Hu 04 окт. 2013, в 00:33

13

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

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

Alireza 17 июнь 2017, в 04:22

9

CSS `clip-path`

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

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

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

Извлечение из журнала Smashing

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

Stewartside 09 март 2016, в 16:33

9

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

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

Tom Sarduy 31 июль 2015, в 21:42

8

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

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

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

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

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

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

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

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

vsync 27 май 2015, в 21:28

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

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

Другой способ - контролировать высоту 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 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>

Temani Afif 06 апр. 2018, в 15:35

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

HelloWorldNoMore 14 дек. 2015, в 04:02

3

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

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

Doml The-Bread 06 март 2015, в 18:20

3

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

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

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

Nedudi 12 янв. 2014, в 16:09

Ещё вопросы

Как насчет площади, которой там нет? jsfiddle.net/minitech/sZgaa
@mskfisher Размер нижней границы вашего равностороннего треугольника не должен быть ceil (sqrt (3) * 60)? Еще несколько пикселей!
@Niloct: я быстро посмотрел на круглые числа. Вы правы, более точные равносторонние измерения были бы (сторона: 58, низ: 100) или (сторона: 60, низ: 104).
Вот отличный генератор треугольников CSS для всех направлений и размеров: apps.eky.hk/css-triangle-generator
Обратите внимание, что в IE8 поддерживаются следующие фигуры (из css-tricks.com/examples/ShapesOfCSS ): квадрат, прямоугольник, все треугольники, трапеция, звезда (6 точек), пятиугольник, шестиугольник, восьмиугольник, алмазный квадрат, алмазный щит, бриллиант узкий, ограненный бриллиант. Примечание: я проверял это на browserstack.com
Эта анимация также чрезвычайно полезна для понимания этого: css-tricks.com/animation-css-triangles-work
There's another way to draw .. , который оказывается таким же образом :) Хотя хорошее объяснение
-1 для использования JPEG с массивными артефактами. Но +1 за создание отличного примера того, когда не следует использовать JPEG-файлы, на которые я могу ссылаться в будущем для сдерживания. ;)
Извините, @hheimbuerger, я испортил ваш пример, исправив изображения. В будущем вам нужно будет сослаться на редакцию 2 этого ответа .
Я очень поддерживаю подобные примеры сообщений, @Rory. ;) Спасибо, теперь это выглядит намного лучше!
Хотя концептуально это совпадает с ответом sdleihssirhc, я считаю, что это лучший ответ на этот вопрос.
Вероятно, стоит упомянуть, что 1.41 - это приближение √2 и длины гипотенузы создаваемого вами треугольника, поэтому вам нужна (как минимум) эта ширина.
Я хотел, чтобы ответ был простым, но вы правы, стоит упомянуть @KRyan
На самом деле, при попытке использовать это, было бы полезно упомянуть, как были получены различные ширины для использования с skewX .
Этот метод работает лучше, когда вам нужна сплошная граница 1px для треугольника.
Вау для этой анимированной графики. Настоящий пример картины может сказать 1000 слов!
Это для случая, когда вы хотите создать границы для треугольника, я застрял на пути границ, когда я хочу создать это поле аннотации AnnotationBox
Привет. Потрясающее решение. Я хотел бы знать математику для всего этого. Мне нужен более короткий треугольник, и я не уверен, как его достичь: / Я видел вашу демонстрацию, охватывающую множество вариантов, но не мог понять общую математику каждого решения. Под этим я подразумеваю связь между свойствами skew, rotate и padding-bottom.
Привет @banzomaikaka Я не был так далеко в расчетах. У меня не было необходимости вычислять точные размеры треугольника, и я использовал только метод проб / ошибок для проектирования плоских или высоких треугольников. У меня не будет времени, чтобы сделать это сейчас, но если вам удастся определить взаимосвязь между свойствами, пожалуйста, дайте мне знать.
Привет @ веб-тики. Нет проблем. В любом случае, спасибо;) Если я это сделаю, я вернусь сюда.
Я не думаю, что "избит" является подходящим словом здесь. Решение основывается на показателях шрифта, поэтому точное позиционирование весьма сомнительно, не говоря уже о том, что вы не можете контролировать форму.
как это не кросс браузер? треугольники должны работать обратно в IE6.
использование: before и: after не поддерживается на 100%.
Псуэдо-элементы не поддерживаются <IE8.
Это красивое решение, но следует отметить, что это только IE 10+.

sdleihssirhc · Accepted Answer · 2011-08-16T04-59-00.000Z

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

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

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

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

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

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

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

@Jauzsika, вы можете добавить эти треугольники на страницу, не добавляя дополнительные элементы, просто используя :before или :after псевдо-классы.
stackoverflow.com/questions/5623072/… я думаю, что имеет в виду мистер BoltClock.
Действуйте с анимацией: jsfiddle.net/pimvdb/mA4Cu/104 . Просто для тех из нас, кому нужно еще больше визуальных доказательств, как я ...
С разными left-border и right-border может быть получен неизоблочный треугольник. И когда много треугольников объединены ... jsfiddle.net/zRNgz
@alex Есть ли возможность добавить эффект градиента для таких фигур, которые создаются с использованием границ? [моя проблема] ( stackoverflow.com/questions/39652551/… )
В 2018 году, есть ли лучший способ сделать треугольник с помощью CSS, а не использовать этот хак?

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

18 ответов

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

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

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

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

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

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

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

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

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

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

CSS clip-path

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

Даунсайд

Ресурсы

Шаг 1:

Шаг 2

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

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

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

Ещё вопросы

CSS `clip-path`