phpjsJqueryhtmlcssblog

Треугольник CSS

"Треугольник CSS", как сделать треугольник html/css? Примеры кода треугольников. Можно поставить любой цвет треугольника.

Подробно о треугольнике html/css

1. О треугольниках с помощью html/css.
2. Треугольник вершиной вверх
3. Треугольник вершиной вправо
4. Треугольник вершиной вниз
5. Треугольник вершиной влево
6. Треугольник вершиной вверх и вправо
7. Треугольник вершиной вниз и вправо
8. Треугольник вершиной вниз и влево
9. Треугольник вершиной вверх и влево

Скопировать ссылку



О треугольниках с помощью html/css.

Треугольник в html/css можно сделать при помощи border, как вы наверное знаете:

Что у border есть 4 позиции:

 border-bottom.

 border-right.

 border-top.

 border-left.

Этими позициями можно управлять по отдельности, добавим bottom, right, top, left:

 border-top: 30px solid #0906ff;
 border-right: 30px solid #ffbc06;
 border-bottom: 30px solid red;
 border-left: 30px solid #31ff06;


Далее простой пример:

Четыре треугольника из 4 "border"

Html:

<div class="example"></div>

Css:

<style>

 .example{

 border-bottom: 30px solid red;

 border-right: 30px solid #ffbc06;

 border-top: 30px solid #0906ff;

 border-left: 30px solid #31ff06;

 width: 0;

 height: 0;}

</style>

Результат 4 треугольника:
Скопировать ссылку



Треугольник вершиной вверх

Для того, чтобы сделать "треугольник вершиной вверх" css вам потребуется:

Используем любой тег - пусть это будет div.

Внутрь первого тега помещаем attribute style и в нем ухе создадим наш треугольник:

Зададим border + solid + и весь бордюр сделаем прозрачным(transparent):

border: 30px solid transparent;

Задаем нижнюю четверть бордюра - добавим bottom + solid + предопределенный цвет - red

border-bottom: 30px solid red;

Сам блок, в котором расположен наш треугольник не нужен, поэтому.. width и height ставим ноль

width: 0;

height: 0;

Соберем весь код треугольника :

Код треугольника с вершиной вверх:

<div style="border: 30px solid transparent; border-bottom: 30px solid red; width:0;height:0"></div>

Вывод кода треугольника с вершиной вверх:

Скопировать ссылку



Треугольник вершиной вправо

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

Теория треугольника вершиной вверх

И в коде заменяем позицию "bottom" на позицию "left":

<div style="border: 30px solid transparent; border-left: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной вправо:

Скопировать ссылку

Треугольник вершиной вниз

Следующие создания треугольников в любую сторону связано с механическим изменением позиции вершины:

Для вывода треугольника с вершиной вниз... вам понадобится:

Теория треугольника вершиной вверх

И в коде заменяем позицию "bottom" на позицию "top":

<div style="border: 30px solid transparent; border-top: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной вниз:

Скопировать ссылку



Треугольник вершиной влево

Следующие создания треугольников в любую сторону связано с механическим изменением позиции вершины:

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

Теория треугольника вершиной вверх

И в коде заменяем позицию "bottom" на позицию "right":

<div style="border: 30px solid transparent; border-right: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной влево:

Скопировать ссылку

Треугольник вершиной вверх и вправо

Есть еще возможность сделать треугольник, который будет смотреть не с шагом в 90°, а шаг будет: 45°

Для вывода треугольника с вершиной вверх и вправо... вам понадобится:

Теория треугольника вершиной вверх

Используем сразу две позиции: "top" + "right":

<div style="border: 30px solid transparent; border-top: 30px solid red; border-right: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной вверх и вправо:

Скопировать ссылку



Треугольник вершиной вниз и вправо

Для вывода треугольника с вершиной вниз и вправо... вам понадобится:

Теория треугольника вершиной вверх и вправо

Используем сразу две позиции: "right" + "bottom" :

<div style="border: 30px solid transparent; border-right: 30px solid red; border-bottom: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной вниз и вправо:

Скопировать ссылку

Треугольник вершиной вниз и влево

Для вывода треугольника с вершиной вниз и влево... вам понадобится:

Теория треугольника вершиной вверх и вправо

Используем сразу две позиции: "bottom" + "left" :

<div style="border: 30px solid transparent; border-bottom: 30px solid red; border-left: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной вниз и влево:

Скопировать ссылку



Треугольник вершиной вверх и влево

Для вывода треугольника с вершиной вверх и влево... вам понадобится:

Теория треугольника вершиной вверх и вправо

Используем сразу две позиции: "left" + "top" :

<div style="border: 30px solid transparent; border-left: 30px solid red; border-top: 30px solid red; width:0;height:0"></div>

Пример треугольника с вершиной вверх и влево:

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

---