1846

У CSS Tricks є багато різних форм CSS - Фігури CSS, і я особливо спантеличений трикутником:

CSS Трикутник

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

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

Розгорніть фрагмент

Як і чому це працює?

— Станіслав Шабалін
джерело

59

Ви можете: jsfiddle.net/wbZet

— mskfisher

55

Як щодо площі, якої там немає? jsfiddle.net/minitech/sZgaa

— Рибаковим

1

@mskfisher Розмір нижньої межі вашого рівностороннього трикутника не повинен бути стелею (sqrt (3) * 60)? Ще кілька пікселів!

— Нілокт

1

@Niloct: Я швидко поставив це на круглі цифри. Ви маєте рацію, точнішими будуть рівносторонні вимірювання (сторона: 58, низ: 100) або (сторона: 60, низ: 104).

— mskfisher

1

Ось чудовий генератор трикутників CSS для всіх напрямків та розмірів: apps.eky.hk/css-triangle-generator

— Аллан Кроки

2239

CSS Трикутники: трагедія в п'яти актах

Як сказав Алекс , межі однакової ширини стикуються одна проти одної під кутом 45 градусів:

межі зустрічаються під кутом 45 градусів, вміст посередині

Якщо у вас немає верхньої межі, це виглядає приблизно так:

немає верхньої межі

Тоді ви даєте йому ширину 0 ...

немає ширини

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

немає і висоти

... і нарешті, ви зробите дві бічні межі прозорими:

прозорі бічні межі

Це призводить до трикутника.

— sdleihssirhc
джерело

10

@Jauzsika, ви можете додати ці трикутники на сторінку без додавання додаткових елементів просто за допомогою класів :beforeабо :afterпсевдо.

— zzzzBov

stackoverflow.com/questions/5623072/… - я думаю, на що йдеться містер BoltClock.

— тридцятьдот

99

Дійте з анімаціями: jsfiddle.net/pimvdb/mA4Cu/104 . Просто для тих, хто потребує ще більш наочного доказу, як я ...

— pimvdb

З різним left-borderі right-border, не рівнобедреним трикутником можна зробити. А коли поєднується багато трикутників ... jsfiddle.net/zRNgz

— JiminP

2

У 2018 році чи є кращий спосіб скласти трикутник за допомогою CSS, а не використовувати цей злом?

— Scribblemacher

518

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

Прикордонний приклад

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

<div></div>

Розгорніть фрагмент

Погляньте на jsFiddle .

Приховавши певні межі, ви можете отримати ефект трикутника (як ви бачите вище, зробивши різні ділянки різними кольорами). transparentчасто використовується як колір краю для досягнення форми трикутника.

— алекс
джерело

487

Почніть з базового квадрата та меж. Кожному бордюру буде надано інший колір, щоб ми могли їх розрізнити:

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

що дає вам це :

Але для верхньої межі немає потреби, тому встановіть її ширину 0px. Тепер наша межа з нижньою межею 200pxзробить наш трикутник висотою 200 пікселів.

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

і ми отримаємо це :

Потім, щоб приховати два бічні трикутники, встановіть колір рамки прозорим. Оскільки верхня межа була ефективно видалена, ми також можемо встановити прозорі кольори межі.

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

нарешті ми отримуємо це :

— Муна Чейхна
джерело

21

Круто, але це не той же шлях? :-)

— Станіслав Шабалін

5

There's another way to draw .., що виявляється так само :) Хоча

— приємне

16

-1 для використання JPEG з масивними артефактами. Але +1 для створення чудового прикладу, коли не слід використовувати JPEG, з якими я можу в майбутньому зв’язатись для стримування. ;)

— Генрік Хаймбургер

3

чому тут не використовується gif?

— prusswan

4

Вибачте @hheimbuerger, я переплутав ваш приклад, виправляючи зображення. У майбутньому вам доведеться посилатися на версію 2 цієї відповіді .

— Rory O'Kane

263

Інший підхід:

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

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

gif анімація: як зробити трикутник з перетворенням обертати

Посилання на АНІМАЦІЮ: Як скласти трикутник CSS3 .
І DEMO: трикутники CSS3, виконані з перетворенням, обертаються.

Інакше тут детальне пояснення у 4-х актах (це не трагедія) того, як зробити рівнобедрений прямокутний трикутник з одним елементом.

Примітка 1: для НЕ рівнобедрених трикутників і модних речей, ви можете побачити крок 4 .
Примітка 2. У наступних фрагментах префікси постачальника не включені. вони включаються в демонстраційні програми codepen .
Примітка 3: HTML для наступного пояснення завжди є: <div class="tr"></div>

КРОК 1: Створіть діву

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

У цей розділ вставте псевдоелемент і надайте йому 100% ширини та висоти батьківського елемента. На наступному зображенні псевдоелемент має синій фон.

Створення трикутника CSS з кроком 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: Давайте обернемось

По-перше, найважливіше: визначити походження перетворення . За замовчуванням початок координат знаходиться в центрі елемента псевдо , і ми повинні його в лівому нижньому кутку. Додавши цей CSS до псевдоелементу:

transform-origin:0 100%; або transform-origin: left bottom;

Тепер ми можемо обертати псевдоелемент на 45 градусів за годинниковою стрілкою transform : rotate(45deg);

Створення трикутника з CSS3 крок 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: прихойте це

Щоб приховати небажані частини псевдоелемента (все, що переповнює діву жовтою облямівкою), вам просто потрібно встановити overflow:hidden;на контейнер. вилучивши жовту облямівку, ви отримаєте ... ТРИГУЛЬНИК ! :

DEMO

Трикутник CSS

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().
Зробіть їх вліво, вправо або в будь-якому іншому напрямку, граючи з початком перетворення та напрямом обертання.
Зробіть деяке відображення із властивістю 3D-перетворення.
Дайте межі трикутника
Покладіть зображення всередину трикутника
Набагато більше ... Розкрийте повноваження CSS3 !

Навіщо використовувати цю техніку?

Трикутник може бути легко чуйним.
Можна зробити трикутник з облямівкою .
Ви можете підтримувати межі трикутника. Це означає, що ви можете запустити стан наведення або натиснути подію лише тоді, коли курсор знаходиться всередині трикутника . Це може стати дуже зручним у таких ситуаціях, як ця, коли кожен трикутник не може перекрити сусіди, тому кожен трикутник має власний стан наведення.
Ви можете зробити такі фантазійні ефекти, як роздуми .
Це допоможе вам зрозуміти властивості перетворення 2d та 3d.

Чому б не скористатися цією технікою?

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

— веб-тики
джерело

16

Напевно, варто згадати, що 1,41 - це наближення √2 та довжина гіпотенузи трикутника, який ви створюєте, саме тому вам потрібна (принаймні) ця ширина.

— KRyan

Я хотів, щоб відповідь була простою, але ви маєте рацію, її слід згадати @KRyan

— web-tiki

Насправді, намагаючись використати це, skewXбуло б корисно згадати про те, як отримані різні ширини для використання .

— KRyan

1

Цей метод працює краще, коли вам потрібна суцільна межа трикутника для трикутника.

— Роман Лосєв

Це для випадку, коли ви хочете створити межі для трикутника, я застряг з межею, коли я хочу створити це поле для анотацій AnnotationBox

— vanduc1102

182

Ось анімація в JSFiddle, яку я створив для демонстрації.

Також дивіться фрагмент нижче.

Це анімований GIF, зроблений із екранізації

Показати фрагмент коду

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Розгорніть фрагмент

Випадкова версія

Показати фрагмент коду

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Розгорніть фрагмент

Одразу версія

Показати фрагмент коду

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))

.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>

Розгорніть фрагмент

— юнзен
джерело

49

Скажімо, у нас є наступний 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;
    }

Це простий дів. З дуже простим CSS. Так мирянин може зрозуміти. Div має розміри 150 х 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;
}

Тепер я просто змінив колір межі всіх 4 сторін. Зображення додається.

введіть тут опис зображення

КРОК: 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;
}

Тепер я просто змінив колір тла на білий. Зображення додається.

введіть тут опис зображення

Отже, ми отримали потрібний нам трикутник.

— Рай Аммад Хан
джерело

3

Чому для першого кроку ви використовували Nether Portal?

— LuizLoyola

38

А тепер щось зовсім інше ...

Замість використання фокусів css не забувайте про рішення, прості, як html-об'єкти:

&#9650;

Результат:

▲

Див.: Які об’єкти HTML для трикутників вгору та вниз?

— Громада
джерело

2

Я не думаю, що "побитий" тут є відповідним словом. Рішення покладається на метрику шрифту, тому точне позиціонування є досить сумнівним, не кажучи вже про те, що ви не маєте контролю над формою.

— користувач776686

32

Розглянемо нижній трикутник

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

Це те, що нам дано:

Невеликий вихід трикутника

Чому він вийшов у такій формі? На наведеній нижче схемі пояснюються розміри, зауважте, що 15px було використано для нижньої межі, а 10px - для лівої та правої.

Великий трикутник

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

Прямокутний трикутник

— Даніель Іммс
джерело

29

Зробивши це на крок далі, використовуючи 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>

Розгорніть фрагмент

— ПсевдоНіня
джерело

1

як це не перехресний браузер? трикутники повинні працювати назад до IE6.

— chriscauley

4

використання: до і після, не підтримуються на 100%.

— PseudoNinja

2

Псеедоелементи не підтримуються <IE8.

— alex

19

Добре, цей трикутник буде створений через те, як межі елементів працюють разом у HTML та CSS ...

Оскільки ми зазвичай використовуємо межі 1 або 2 пікселя, ми ніколи не помічаємо, що межі роблять кути на 45 ° один до одного однаковою шириною, і якщо ширина змінюється, ступінь кута також змінюється, запускаємо CSS-код, який я створив нижче:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

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

Розгорніть фрагмент

Тоді на наступному кроці у нас немає ширини чи висоти, приблизно так:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

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

Розгорніть фрагмент

А тепер робимо ліву і праву межі невидимими, щоб зробити наш бажаний трикутник як нижче:

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

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

Розгорніть фрагмент

Якщо ви не бажаєте запускати фрагмент для перегляду кроків, я створив послідовність зображень, щоб переглянути всі кроки в одному зображенні:

— Аліреза
джерело

18

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

Це прекрасне рішення, але слід зазначити, що це лише IE 10+.

— Ерік Ху

13

CSS `clip-path`

Це те, що я вважаю, це питання пропустило; clip-path

clip-path коротко

Відсікання з clip-pathвластивістю схоже на вирізання форми (як коло або п’ятикутник) з прямокутного аркуша паперу. Властивість належить специфікації " Модуль маскування CSS рівня 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а також почати створювати свій власний.

— Стюартсайд
джерело

11

Це старе питання, але, думаю, варто було б поділитися тим, як створити стрілку за допомогою цієї техніки трикутника.

Крок 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/

— Том Сардуй
джерело

9

SASS (SCSS) трикутник mixin

Я написав це, щоб полегшити (і 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
джерело

8

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

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

Використання такого значення градуса 45°змусить нас дотримуватися певного співвідношення height/width, щоб отримати потрібний нам трикутник, і це не буде відповідати:

Показати фрагмент коду

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

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

Розгорніть фрагмент

Замість цього ми повинні враховувати заздалегідь задані значення напрямку, наприклад to bottom, to topтощо. У цьому випадку ми можемо отримати будь-яку форму трикутника, зберігаючи її чутливість.

1) Прямокутний трикутник

Для отримання такого трикутника , нам потрібно один лінійного градієнт і-діагональне напрямок , як to bottom right, to top left, to bottom left, і т.д.

Показати фрагмент коду

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

Розгорніть фрагмент

2) рівнобедрений трикутник

Для цього нам знадобиться 2 лінійних градієнта, як вище, і кожен займе половину ширини (або висоти). Це як ми створюємо дзеркальне зображення першого трикутника.

Показати фрагмент коду

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

Розгорніть фрагмент

3) рівносторонній трикутник

Це трохи складніше в обробці, оскільки нам потрібно підтримувати залежність між висотою та шириною градієнта. У нас буде такий самий трикутник, як вище, але ми зробимо обчислення складнішим, щоб перетворити рівнобедрений трикутник на рівносторонній.

Щоб зробити це легше, ми вважатимемо, що ширина нашого діва відома, а висота досить велика, щоб можна було намалювати наш трикутник всередині ( height >= width).

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

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

Ми можемо розраховувати на те calc(), щоб зробити свій розрахунок та отримати необхідний результат:

Показати фрагмент коду

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

Розгорніть фрагмент

Інший спосіб полягає в тому, щоб контролювати висоту діва та легко зберігати синтаксис градієнта:

Показати фрагмент коду

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

Розгорніть фрагмент

4) Випадковий трикутник

Отримати випадковий трикутник легко, оскільки нам просто потрібно зняти умову 50% кожного з них, Але ми повинні зберегти дві умови (обидві повинні мати однакову висоту, а сума обох ширин повинна бути 100%).

Показати фрагмент коду

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<div class="tri-1"></div>

Розгорніть фрагмент

Але що робити, якщо ми хочемо визначити значення для кожної сторони? Нам просто потрібно зробити розрахунок ще раз!

Давайте визначимо hg1і hg2як висоту нашого градієнта (обидва рівні червоній лінії) тоді wg1і wg2як ширину нашого градієнта ( wg1 + wg2 = a). Я не збираюся детально розраховувати, але тоді ми матимемо:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

Тепер ми досягли межі CSS, оскільки навіть при цьому calc()ми не зможемо це реалізувати, тому нам просто потрібно зібрати кінцевий результат вручну та використовувати їх як фіксований розмір:

Показати фрагмент коду

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

Розгорніть фрагмент

Бонус

Ми не повинні забувати, що ми також можемо застосувати обертання та / або перекос, і у нас є більше можливостей отримати більше трикутника:

Показати фрагмент коду

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

Розгорніть фрагмент

І звичайно, ми повинні пам’ятати про рішення SVG, яке може бути більш підходящим у певній ситуації:

Показати фрагмент коду

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

Розгорніть фрагмент

— Темані Афіф
джерело

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/

— Doml The-Bread
джерело

4

Інші це вже добре пояснили. Дозвольте дати вам анімацію, яка пояснить це швидко: 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
джерело

2

Якщо ви хочете , щоб грати з border-size, widthі heightпобачити , як ті можуть створювати різні форми, спробуйте наступне:

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

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

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

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

update({});

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

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

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

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

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

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

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

Розгорніть фрагмент

— Danziger
джерело

1

Спробуйте це:-

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

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

Розгорніть фрагмент

— сатисовий малик
джерело

0

Я знаю, що це старе, але я хотів би додати до цього обговорення, що існує принаймні 5 різних методів створення трикутника за допомогою лише HTML та CSS.

Використання borders
Використання linear-gradient
Використання conic-gradient
Використання transformтаoverflow
Використання clip-path

Я думаю, що всі тут охоплені, окрім методу 3, використовуючи conic-gradient, тому я поділюсь цим:

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

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

Розгорніть фрагмент

— coding-dude.com
джерело

Як працюють трикутники CSS?

CSS Трикутники: трагедія в п'яти актах

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

КРОК 1: Створіть діву

КРОК 2: Давайте обернемось

КРОК 3: прихойте це

КРОК 4: йдіть далі ...

Навіщо використовувати цю техніку?

Чому б не скористатися цією технікою?

Випадкова версія

Одразу версія

CSS clip-path

Приклад форми трикутника

Нижня частина

Ресурси

Крок 1:

Крок 2

SASS (SCSS) трикутник mixin

приклад використання:

Сторінка майданчика

CSS `clip-path`