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


Там у вас багато різних форматів CSS CSS Tricks - Форми CSS і я особливо здивований трикутником:

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

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


1637
2017-08-16 03:54


походження


Велике питання! Це буде ще більш вражаючим, якщо б можна було б намалювати рівносторонній трикутник;) - Abel
Ти можеш: jsfiddle.net/wbZet - mskfisher
Як щодо площі, де там немає? jsfiddle.net/minitech/sZgaa - Ry-♦
Це просто, змінити "червоний" на "синій", а трикутник буде синім :-) - Ofer Zelig
Мій приятель має сторінку з поясненням та додаток, що використовує його для створення 3-х об'єктів: uselesspickles.com/triangles - Juan Mendes


Відповіді:


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

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

borders meet at 45 degree angles, content in middle

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

no top border

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

no width

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

no height either

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

transparent side borders

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


2057
2017-08-16 04:11



@Jauzsika, ви можете додати ці трикутники до сторінки без додавання додаткових елементів, просто використовуючи :before або :after псевдокласи. - zzzzBov
@zzzzBov: псевдоелементи. - BoltClock♦
stackoverflow.com/questions/5623072/... Я думаю, що називається пан БолтКлок. - thirtydot
Красиві ілюстрації. Тепер ви можете це зробити в CSS? - ikdc
Записати анімацію: jsfiddle.net/pimvdb/mA4Cu/104. Тільки для тих з нас, хто потребує ще більшого візуального досконалості, як я ... - pimvdb


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

Border example

jsFiddle.

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


486
2017-08-16 03:58





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

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

що дає тобі це:

square with four borders

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

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

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

bottom half of square with four borders

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

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

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

triangular bottom border


437
2017-08-17 11:16



Прохолодно, але це не так так само шлях? :-) - Stanislav Shabalin
There's another way to draw .., який виявляється таким же :) Хороше пояснення, хоча - Hammad Khan
-1 для використання JPEG з масивними артефактами. Але +1 для створення чудового прикладу того, коли не використовувати JPEG-файли, якими я можу зв'язати в майбутньому, щоб стримувати. ;) - Henrik Heimbuerger
чому тут не використовується GIF? - prusswan
Вибачте @hheimbuerger, я зіпсував ваш приклад, виправивши зображення. Вам доведеться зв'язатись перегляд 2 цієї відповіді в майбутньому. - Rory O'Kane


Різний підхід:

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

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

gif animation : how to make a triangle with transform rotate

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

  • Примітка 1: для неоднорідних трикутників та фантастичних матеріалів ви можете побачити крок 4.
  • Примітка 2: у наступних фрагментах префікси постачальника не входять. вони входять до складу демо-кодування.
  • Примітка 3: HTML для такого пояснення завжди:  <div class="tr"></div>

КРОК 1 : Зробіть div

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

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

Making a CSS triangle with transform roate step 1

На цьому ми маємо це CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

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

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

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

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

Creating a triangle with CSS3 step 2

На цьому ми маємо це CSS :

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

КРОК 3: приховати

Щоб приховати небажані частини псевдоелементів (все, що переповнює div з жовтою рамкою) потрібно просто встановити overflow:hidden; на контейнері після видалення жовтої межі ви отримаєте ... a TRIANGLE! :

DEMO

CSS triangle

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

КРОК 4: піти далі ...

Як показано в демонстрація, ви можете налаштувати трикутники:

  1. Зробіть їх тонкими або льстивими, граючи з ними skewX().
  2. Зробіть їх вліво, вправо чи в будь-якому іншому напрямку, граючи за допомогою перетворення орієнтації та напрямку обертання.
  3. Зробити деяка рефлексія з властивістю 3D-перетворення.
  4. Дайте трикутник кордонів
  5. Покладіть зображення всередині трикутника
  6. Набагато більше ... Розкрийте повноваження CSS3!

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

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

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

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

215
2017-07-17 16:30



Напевно, варто зазначити, що 1.41 - це наближення √2 та довжина гіпотенузи тріузату, який ви створюєте, тому вам потрібно (принаймні) та ширина. - KRyan
Я хотів залишити відповідь просту, але ви маєте рацію, слід згадати @KRyan - web-tiki
Насправді, намагаючись використати це, згадуємо, як використовувати різні ширини для skewX були виведені були б корисними. - KRyan
Цей метод працює краще, коли вам потрібна 1px тверда межа для трикутника. - Roman Losev
Вау, що анімована графіка. Вірний приклад картини може сказати 1000 слів! - Gaurav Ramanan


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

Також див. Фрагмент нижче.

Це анімований GIF з екрану

Animated Gif of Triangle

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


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


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

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

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



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


Все одночасно версія

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


157
2017-11-29 11:21





Скажімо, ми маємо наступний 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. Тож мисливець може зрозуміти. Розміри розміром 150 x 150 пікселів із межею 50 пікселів. Зображення додається:

enter image description here

КРОК 2:  JSfiddle Посилання:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

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

enter image description here

КРОК: 3  JSfiddle Посилання:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

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

enter image description here

КРОК 4:  JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

Тепер я зробив всі кордони прозорими, крім нижньої межі. Зображення прикріплено нижче.

enter image description here

КРОК 5:  JSfiddle Посилання:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

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

enter image description here

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


40
2018-06-17 06:09





І ось щось зовсім інше ...

Замість того, щоб використовувати css трюки, не забувайте про рішення так само просто, як html entities:

&#9650;

Результат:

Побачити: Які сутності HTML для трикутників вгору та вниз?


35
2017-12-01 12:40



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


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

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

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

Small triangle output

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

Large triangle

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

Right angle triangle


29
2018-03-21 11:20





Враховуючи це на один крок далі, за допомогою 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>


27
2017-12-30 16:56



як це не крос-браузер? трикутники повинні повернутися до IE6. - chriscauley
використання: до і після: після 100% не підтримується. - PseudoNinja
Псевдо-елементи не підтримуються <IE8. - alex


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


15
2017-07-26 00:19



Це чудове рішення, але слід зазначити, що це лише IE 10+. - Eric Hu


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

Крок 1:

Давайте створимо 2 трикутники, для другого ми будемо використовувати :after псевдоклас і помістіть його трохи нижче іншого:

2 triangles

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

Крок 2

Тепер нам просто потрібно встановити переважаючий колір кордону другого трикутника на той самий колі фону:

enter image description here

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

Скрізь всі стріли:
http://jsfiddle.net/tomsarduy/r0zksgeu/


9
2017-07-31 20:42