Создание треугольника с помощью CSS3
На данном уроке на простом примере увидим работу новых стандартов CSS.
CSS3 — это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1.
Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как Adobe Photoshop), скриптов (таких как JavaScript) или специальных «хитростей» могут легко достигаться в CSS3 за счет использования новых свойств оформления.
В CSS3 Вы можете:
- Создавать элементы со сглаженными углами;
- Создавать линейные и сферические градиенты;
- Более гибко оформлять фоновую картинку элементов;
- Добавлять к элементам и к тексту элементов тени;
- Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);
- Создавать анимацию и различные эффекты переходов;
- Задавать цвета несколькими новыми способами и многое другое.
Создаем папку «Треугольник» на диске C:
Открываем программу Notepad++, создаем новый документ и сохраняем файл под именем index.html в папку «Треугольник». Пишем HTML код для нашей страницы:
<!DOCTYPE HTML> <!-- Стандарт HTML5 -->
<html>
<head>
<title>Треугольник</title> <!-- Заголовок -->
<link rel="stylesheet" type="text/css" href="style.css" title="style" /> <!-- Подключаем стиль CSS -->
</head>
<body>
<div class="treugolnik"> <!-- Добавляем блок, в котором будет треугольник-->
</div>
</body>
</html>
В комментариях, помеченных символами <!— —> описаны основные ключевые этапы создания треугольника.
После написания кода сохраняем файл index.html в папку «Треугольник» .
Затем создаем новый документ и сохраняем файл под именем style.css в папку «Треугольник». Печатаем следующий код:
.treugolnik{
width: 0; /*Ширина*/
height: 0;/*Высота*/
border-left: 150px solid green; /*Устанавливаем толщину левой границы треугольника*/
border-right: 150px solid green; /*Устанавливаем толщину правой границы треугольника*/
border-bottom: 300px solid red ; /*Устанавливаем толщину нижней границы треугольника*/
}
Стиль solid означает прорисовка простой линией. Для левой и правой границы установим цвет green(зеленый), а для нижней границы цвет красный (red).
Сохраняем файл style.css, переходим в папку «Треугольник» и открываем файл index.html
Теперь уберем зеленые границы с помощью свойства transparent(прозрачность):
.treugolnik{
width: 0; /*Ширина*/
height: 0;/*Высота*/
border-left: 150px solid transparent; /*Устанавливаем толщину левой границы треугольника*/
border-right: 150px solid transparent; /*Устанавливаем толщину правой границы треугольника*/
border-bottom: 300px solid red ; /*Устанавливаем толщину нижней границы треугольника*/
}
Сохраняем файл и получаем результат: