Программирование html css Помогите

Question

Программирование html css Помогите

more-powerful Профи (578), на голосовании 1 месяц назад

Лабораторная работа 3.Каскадные таблицы стилей CSS
Цель: Изучить основы каскадных таблицы стилей CSS.
Программное обеспечение: HTML-редактор
Создать изображение в соответствии с вариантом, используя только свойства CSS.

Answer 1

ну, просто научись фигуры рисовать, крутить и двигать
https://codepen.io/VISTASTER/pen/KwPNOPY

Answer 2

*index.html*

<!DOCTYPE html>
<html>
<head>
<title>CSS Shapes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="diamond lightblue"></div>
<div class="diamond yellow"></div>
<div class="diamond pink"></div>
</div>
</body>
</html>

*style.css*

.container {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
}

.diamond {
width: 80px;
height: 80px;
position: absolute;
transform-origin: center;
border-radius: 10px; /* Добавляем закругление углов */
border: 2px solid black; /* Добавляем черную обводку */
}

.lightblue {
background-color: lightblue;
top: 0;
left: 50%;
margin-left: -40px;
transform: rotate(45deg);
}

.yellow {
background-color: yellow;
bottom: 20px;
left: 0;
transform: rotate(45deg);
}

.pink {
background-color: #cc1c79;
bottom: 20px;
right: 0;
transform: rotate(45deg);
}