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

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

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

jsFiddle.

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

Ответ 3

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

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

Ответ 4

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

треугольники 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 здесь.

Ответ 5

Вот анимация в 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>

Ответ 6

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

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

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

Ответ 7

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

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

&#9650;

Результат:

▲

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

Ответ 8

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

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

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

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

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

Ответ 12

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>

Ответ 13

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

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

Ответ 14

Треугольный смеситель 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);
}

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

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

Ответ 15

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

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

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

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*To illustrate*/
  border:1px solid;
}

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

Ответ 16

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

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

Ответ 17

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

Ответ 18

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

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

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

Ответ 19

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

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

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