• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Как сделать треугольник через CSS

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

В этой статье мы рассмотрим как сделать треугольники и другие интересные фигуры посредством CSS.

В арсенале свойств CSS отутствуют треугольники и прочие фигуры. Однако за счет хитростей (накладывание одних границ элемента на другие), мы можем сделать из границ объекта практически все что угодно. Рассмотрим для начала варианты создания треугольника, а ниже также и другие интересные фигуры (звезда, сердце, кольцо и т.п.).

Таблица с геометрическими фигурами средства CSS

Фигура Исходный код
Треугольник вверх 
.treugolnik{
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 40px solid blue;
	}
Треугольник вниз 
.treugolnik_niz {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 40px solid blue;
	}
Треугольник влево 
.treugolnik_vlevo {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 40px solid blue;
	border-bottom: 20px solid transparent;
	}
Треугольник направо 
.treugolnik_napravo {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-left: 40px solid blue;
	border-bottom: 20px solid transparent;
	}
Треугольник слева вверху 
.pryam_treugolnik_lt {
	width: 0;
	height: 0;
	border-top: 40px solid #0AA; 
	border-right: 40px solid transparent;
	}
Треугольник справа вверху 
.pryam_treugolnik_rt {
	width: 0;
	height: 0;
	border-top: 40px solid #0AA; 
	border-left: 40px solid transparent;
	}
Треугольник снизу слева 
.pryam_treugolnik_lb {
	width: 0;
	height: 0;
	border-bottom: 40px solid #0AA; 
	border-right: 40px solid transparent;	
	}
Треугольник снизу справа 
.pryam_treugolnik_rb {
	width: 0;
	height: 0;
	border-bottom: 40px solid #0AA; 
	border-left: 40px solid transparent;	
	}
Круг 
.krug {
	width: 40px;
	height: 40px;
	background: blue;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	}
Овал 
.oval {
	width: 80px;
	height: 40px;
	background: orange;
	-moz-border-radius: 40px / 20px;
	-webkit-border-radius: 40px / 20px;
	border-radius: 40px / 20px;
	}
Параллелограм 
.parallelogram {
	width: 75px;
	height: 50px;
	-webkit-transform: skew(30deg);
	-moz-transform: skew(30deg);
	-o-transform: skew(30deg);
	background: green;
	}
Трапеция 
.trapeciya {
	border-bottom: 50px solid green;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 50px;
	}
Звезда 
.zvezda {
	margin: 50px 0;
	position: relative;
	display: block;
	color: red;
	width: 0px;
	height: 0px;
	border-right:  100px solid transparent;
	border-bottom: 70px solid red;
	border-left:   100px solid transparent;
	-moz-transform:    rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform:     rotate(35deg);
	-o-transform:      rotate(35deg);
	}
	.zvezda:before {
	border-bottom: 80px solid red;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	display: block;
	content: '';
	-webkit-transform: rotate(-35deg);
	-moz-transform:    rotate(-35deg);
	-ms-transform:     rotate(-35deg);
	-o-transform:      rotate(-35deg);
	}
	.zvezda:after {
	position: absolute;
	display: block;
	color: red;
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px solid red;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform:    rotate(-70deg);
	-ms-transform:     rotate(-70deg);
	-o-transform:      rotate(-70deg);
	content: '';
	}
Пятиугольник 
.pyatiugolnik {
	position: relative;
	width: 54px;
	border-width: 50px 18px 0;
	border-style: solid;
	border-color: #D02090 transparent;
	}
	.pyatiugolnik:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -85px;
	left: -18px;
	border-width: 0 45px 35px;
	border-style: solid;
	border-color: transparent transparent #D02090;
	}
Шестиугольник 
.shestiugolnik {
	width: 100px;
	height: 55px;
	background: #FF1493;
	position: relative;
	}
	.shestiugolnik:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid #FF1493;
	}
	.shestiugolnik:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid #FF1493;
	}
Восьмиугольник 
.vosmiugolnik {
	width: 100px;
	height: 100px;
	background: #FF1493;
	position: relative;
	}
 
.vosmiugolnik:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid #FF1493;
	border-left: 29px solid #aaa;
	border-right: 29px solid #aaa;
	width: 42px;
	height: 0;
	}
 
.vosmiugolnik:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid #FF1493;
	border-left: 29px solid #aaa;
	border-right: 29px solid #aaa;
	width: 42px;
	height: 0;
	}
Сердце из CSS 
.serdce {
	position: relative;
	width: 100px;
	height: 90px;
	}
.serdce:before,
.serdce:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: red;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	   -moz-transform-origin: 0 100%;
	    -ms-transform-origin: 0 100%;
	     -o-transform-origin: 0 100%;
	        transform-origin: 0 100%;
	}
.serdce:after {
	left: 0;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	   -moz-transform-origin: 100% 100%;
	    -ms-transform-origin: 100% 100%;
	     -o-transform-origin: 100% 100%;
	        transform-origin: 100% 100%;
	}
Знак бесконечности 
.beskonechnost {
	position: relative;
	width: 212px;
	height: 100px;
	}
 
.beskonechnost:before,
.beskonechnost:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;    
	border: 20px solid #EE2C2C;
	-moz-border-radius: 50px 50px 0 50px;
	     border-radius: 50px 50px 0 50px;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	}
 
.beskonechnost:after {
	left: auto;
	right: 0;
	-moz-border-radius: 50px 50px 50px 0;
	     border-radius: 50px 50px 50px 0;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	}

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

Пример красивой рамки для цитат

<html>
<head>
<style>
.krasivyi_block {
	border: 1px solid #3e3c23;
	border-radius: 10px;
	padding: 20px;
	position: relative;
	background: #6f6a2f;
	color: #fff;
	box-shadow: 0 0 3px #000; 
   }
.krasivyi_block::after, .krasivyi_block::before {
	content: '';
	position: absolute;
	background: #6f6a2f;
	left: 20px; 
	bottom: -11px;
	width: 20px; 
	height: 20px;
	box-shadow: 0 0 4px #000; 
	z-index: -1; 
	transform: rotate(45deg); 
	-webkit-transform: rotate(45deg);
   }
.krasivyi_block::before {
	z-index: 1; 
	box-shadow: none; 
   }
</style>
</head>
<body>
	<div class="krasivyi_block">Красивая рамка</div>
</body>
</html>

На странице преобразуется в следующее

Красивая рамка

Читайте также:
• Как сделать якорь ссылки
• Как сделать форму обратной связи на php с каптчей
• Как скруглить углы в HTML через CSS
• Как вставить музыку на сайте
• Как сделать карту изображений (карта ссылок)
• Как сделать слайдер
• Как сделать обтекание картинки текстом
• Как открыть ссылку в новом окне

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru