Создание треугольника с помощью CSS3

Создание треугольника с помощью 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 ;   /*Устанавливаем толщину нижней границы треугольника*/
 }

amlesson

Стиль solid означает прорисовка простой линией. Для левой и правой границы установим цвет green(зеленый), а для нижней границы цвет красный (red).
Сохраняем файл style.css, переходим в папку «Треугольник» и открываем файл index.html

treugolnik_2

Теперь уберем зеленые границы с помощью свойства transparent(прозрачность):

.treugolnik{ 
width: 0; /*Ширина*/
height: 0;/*Высота*/
 border-left: 150px solid transparent;   /*Устанавливаем толщину левой границы треугольника*/
 border-right: 150px solid transparent; /*Устанавливаем толщину правой границы треугольника*/
 border-bottom: 300px solid red ;   /*Устанавливаем толщину нижней границы треугольника*/
 }

Сохраняем файл и получаем результат:

treugolnik_3

Foxford
Информатика в школе