Як зробити трикутники на чистому css.

Відео: Як створити Смурфа на чистому CSS!

Всім привіт! Сьогодні ми розглянемо, як зробити трикутники на чистому CSS.

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

Відео: Перемикачі на чистому CSS

Отже, спочатку напишемо базову розмітку і стилі.

 
lang="En"gt; 
 
charset="Utf-8"gt; 
Test 
 
 
class="Box"gt;

Тепер додамо стилів.

.box { 
 width:100px- 
 height:100px- 
 margin:0auto- 
 border-top:7px solid red- 
 border-left:7px solid green- 
 border-right:7px solid blue- 
 border-bottom:7px solid yellow- 
}

Отже, тепер відкрийте сторінку в браузері і подивіться, що вийшло.

Відео: Уроки по CSS / CSS3. Частина 9. Трикутники

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

Тепер давайте приберемо ширину і висоту

.box { 
 width:0- 
 height:0- 
}

Тепер ви можете бачити, що у нас утворилися 4 трикутника. Якщо нам потрібен тільки верхній, то інші рамки треба зробити прозорими, щоб їх не було видно.

Відео: HTML CSS робимо popup спливаюче вікно після натискання кнопки на чистому css

.box { 
 border-top:7px solid red- 
 border-left:7px solid transparent- 
 border-right:7px solid transparent- 
 border-bottom:7px solid transparent- 
}