Как сделать треугольник с HTML/CSS

Сделать треугольник очень просто, но думаю что нужно нормально объяснить как он получается, а не просто дать вам кусок кода. Использовать мы будем только HTML и CSS.
Для начала сделайте самый обычный квадрат. Точнее не самый обычный, а с бордерами разных цветов.
Я сделал так:

<div class="triangle"></div>
.triangle {
			width: 200px;
			height: 200px;
			box-sizing: border-box; /*учитывает толщину рамки в размеры блока*/
			border-top: 1px solid black;
			border-right: 1px solid red; 
			border-bottom: 1px solid green; 
			border-left: 1px solid gold; 
		}

Ну и выглядит он так:
треугольник html
Давайте попробуем увеличить толщину рамки до 50 пикселей и увидим что получится.

.triangle {
			width: 200px;
			height: 200px;
			box-sizing: border-box; /*учитывает толщину рамки в размеры блока*/
			border-top: 50px solid black;
			border-right: 50px solid red; 
			border-bottom: 50px solid green; 
			border-left: 50px solid gold; 
		}

как сделать треугольник с html
Как вы уже догадались, если увеличить толщину рамок до 100 пикселей (то есть половина одной с сторон квадрата), то получатся 4 треугольника.
Вот такие:
треугольник при помощи html
А сейчас, чтобы сделать с него один треугольник, нужно сделать три не нужные рамки прозрачными. Давайте оставим красный треугольник.

.triangle {
			width: 200px;
			height: 200px;
			box-sizing: border-box; /*учитывает толщину рамки в размеры блока*/
			border-top: 100px solid transparent;
			border-right: 100px solid red; 
			border-bottom: 100px solid transparent; 
			border-left: 100px solid transparent; 
		}

Та-дам-м-м-м… Вышел треугольник как мы и хотели!
красный треугольник хтмл
Как видите, всё очень просто! Надеюсь я дал вам то что вы искали :) До скорых встреч!

Pin It

One thought on “Как сделать треугольник с HTML/CSS

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>