Создание базовых фигур с помощью CSS
CSS предоставляет мощный набор инструментов для создания визуально привлекательных веб-страниц. Одной из наиболее часто используемых функций CSS является возможность создания базовых фигур, таких как квадраты, круги, треугольники, параллелограммы и ромбы. В этой статье мы рассмотрим, как создать эти фигуры с помощью CSS.
Точки для обсуждения
- Квадрат
- Круг
- Треугольник
- Параллелограмм
- Ромб
Начните с базовой структуры кода. У нас есть index.html и style.css.
Основной код, который мы будем использовать для следующей функциональности:
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Shapes with CSS</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "main">
<div class = "container">
<div class = "ShapeName"> </div>
</div>
</div>
</body>
</html>style.css
* {
padding: 0;
margin: 0;
}
.main {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}В соответствии с приведенным выше базовым кодом, нам нужно написать правильное имя класса в соответствии с этим. Поэтому далее мы просто меняем shapeName на имя любой подходящей формы и стиль в соответствии с ним.
Пример: → <div class = "square"></div>
1. Квадрат
HTML :
<div class = "square"> </div>
CSS :
.square {
background: linear-gradient(33deg, #6cacff, #8debff);
width: 100px;
height: 100px;
}Предварительный просмотр :
2. Круг
HTML :
<div class = "circle"> </div>
CSS :
.circle {
background: linear-gradient(33deg, #6cacff, #8debff);
width: 100px;
height: 100px;
border-radius: 50%;
}Предварительный просмотр :
3. Треугольник
HTML :
<div class = "triangle"> </div>
CSS :
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid transparent;
background-color: #6cacff;
}→ Примечание: Изменяя границы, можно также сделать треугольник вверх, треугольник вправо и треугольник влево.
Предварительный просмотр :
4. Параллелограмм
HTML :
<div class = "parallelogram"> </div>
CSS :
.parallelogram {
background: linear-gradient(33deg, #6cacff, #8debff);
width: 100px;
height: 50px;
transform: skew(15deg);
}Предварительный просмотр :
5. Бриллиант
HTML :
<div class = "diamond"> </div>
CSS :
.diamond {
background: linear-gradient(33deg, #6cacff, #8debff);
width: 100px;
height: 100px;
transform: rotate(45deg);
}Предварительный просмотр :
