• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать треугольник при помощи CSS (Создаем геометрические фигуры с помощью CSS)
Как сделать треугольник при помощи CSS
Kosten
Дата: Воскресенье, 2019-04-07, 22:06 | Сообщение 1
Администраторы
Сообщений:20795
Награды: 56


Одним из многих преимуществ CSS3 является то, что он делает веб-страницы лучше, не используя файлы изображений. Это означает, что некоторые основные графические функции достижимы только через CSS3. Рисование фигур с помощью CSS3 является одним из таких преимуществ.

Хотя формы, такие как квадраты и прямоугольники, относительно просты, для рисования треугольника требуется немного больше усилий, но тем не менее это можно сделать в CSS3.

Код CSS3 для треугольника:



Вот код CSS3 для треугольника с вершиной вверху и основанием внизу.

HTML

Код
<div id="satedipoku-bemaskolas"></div>


CSS

Код
#satedipoku-bemaskolas {
    width: 0;
    height: 0;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-bottom: 100px solid #e21414;
}


Демонстрация

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



HTML

Код
<div id="vmidsrula-sdrenekud"></div>


CSS

Код
#vmidsrula-sdrenekud {
    width: 0;
    height: 0;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-top: 100px solid #da1515;
}


Как работают CSS3 треугольники

Чтобы понять, как работает треугольник CSS3, может быть проще взглянуть на него через квадрат CSS3 с разными цветными границами.



HTML

Код
<div id="getacesap-kotunimad"></div>


CSS

Код
#getacesap-kotunimad {
border-color: yellow blue red green;
border-style: solid;
border-width: 155px 155px 155px 155px;
height: 0px;
width: 0px;
}


Вы увидите квадрат размером 155 на 155 пикселей со сплошной рамкой. Верхняя граница желтая, правая синяя, нижняя красная, а левая зеленая. По сути, это четыре треугольника, их вершины встречаются, образуя квадрат из своих оснований.

Теперь мы удалим верхнюю границу, чтобы получить прямоугольник.

Вот новый код:



HTML

Код
<div id="kudesaxam-numolpas"></div>


CSS

Код
#kudesaxam-numolpas {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 145px 145px 145px;
height: 0px;
width: 0px;
}


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



HTML

Код
<div id="patunedsa-kuxsakitug"></div>


CSS

Код
#patunedsa-kuxsakitug {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #c30d0d rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 0px 135px 135px 135px;
    height: 0px;
    width: 0px;
}


Еще один способ достижения того же эффекта - нарисовать прямоугольник и выполнить поворот преобразования. Однако это сложнее. Он также имеет проблемы с совместимостью с браузером, но может быть лучшим вариантом, когда вам нужен адаптивный треугольник и треугольник с границами.
Прикрепления: 1559820.png(23.7 Kb) · 2685603.png(1.3 Kb) · 9407632.png(2.2 Kb) · 8973560.png(2.1 Kb) · 9628872.png(2.1 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2019-04-07, 22:34 | Сообщение 2
Администраторы
Сообщений:20795
Награды: 56


Отзывчивый треугольник с поворотом в левую сторону:



HTML

Код
<div class="kezagtedsam">
  <div class="lsavetug-desamigun"></div>
</div>


CSS

Код
.kezagtedsam {
  width: 100%;
}

/*Left pointing*/
.lsavetug-desamigun {
    width: 15%;
    height: 0;
    padding-top: 15%;
    padding-bottom: 15%;
    overflow: hidden;
}
.lsavetug-desamigun:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top: -480px;
    border-top: 480px solid rgba(0, 0, 0, 0);
    border-bottom: 480px solid rgba(0, 0, 0, 0);
    border-right: 480px solid #1e842d;
}
Прикрепления: 0923077.png(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать треугольник при помощи CSS (Создаем геометрические фигуры с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: