Создание квадрата со стрелкой можно сделать с помощью HTML и CSS. Вот простой пример, как создать квадрат с направленной вниз стрелкой:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Квадрат со стрелкой</title>
<style>
.container {
position: relative;
display: inline-block;
width: 100px; /* ширина квадрата */
height: 100px; /* высота квадрата */
background-color: lightblue; /* цвет квадрата */
border: 2px solid blue; /* рамка квадрата */
margin-bottom: 20px; /* отступ снизу для стрелки */
}
.arrow {
position: absolute;
top: 100%; /* позиционируем стрелку под квадратом */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent; /* создаем стрелку */
border-right: 10px solid transparent;
border-top: 10px solid blue; /* цвет стрелки */
}
</style>
</head>
<body>
<div class="container">
<div class="arrow"></div>
</div>
</body>
</html>
```
**Пояснение:**
1. В классе `.container` задаются размеры и стиль квадрата.
2. В классе `.arrow` используется метод создания стрелки с помощью границ. Устанавливаются прозрачные границы слева и справа, а сверху - цветная граница, что создает эффект стрелки.
3. Позиционирование стрелки осуществляется с помощью абсолютного позиционирования. Стрелка помещается под квадратом.
Вы можете настроить размеры, цвета и другие свойства по своему усмотрению.