Как сделать треугольник через 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 уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.