@SQLpodavan228

Как сделать квадрат с стрелкой?

Как сделать квадрат со стрелкой вниз? Пытался гуглить по запросу border arrow, так и не нашел разумного ответа, либо не мог понять

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style/css.css">
</head>
<body>
    <div class="content">
        <div class="img">
            <img src="./style/img/Vector.jpg" alt="">
            <div class="text">
                <span class="WOODLAND">WOODLAND</span>
                <span class="FURNITURE">FURNITURE</span>
            </div>
        </div>
    </div>
    
</body>
</html>



<code lang="css">

.content {
    border: solid 3px black;
    width: 189px;
    height: 224px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.WOODLAND {
    font-size: 20px;
    color: rgb(221, 169, 105);
}
.FURNITURE   {
    font-size: 13px;
    font-weight: 600;
}

</code>


67320b81a070d981074236.jpeg

67320b89e33c7174754603.jpeg
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
На макете нет никаких border, потому проще всего сделать обычным clip-path:

А вот если таки понадобится border, то тогда уже придётся придумывать всякое.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Hovo_Varosyan
Можешь сделать два дива один квадрат другой треугольник , или один див с after, можешь сделать один div и использовать cliph-path, или два дива один с transform: rotate(); вариантов много смотря какой тебя нужен
Ответ написан
Комментировать
@atabrakadabra
через after как вариант
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
21 нояб. 2024, в 15:58
1000 руб./за проект
21 нояб. 2024, в 15:58
30000 руб./за проект
21 нояб. 2024, в 15:49
30000 руб./за проект