Кастомная форма блока, как можно сделать?

Question

[Юрий Иванов]

не могу из фигмы скопировать такую вот стрелочку, думал её спозиционировать относить блока
можно ли как-то свойствами css добиться эффекта такой стрелки, помогите пожалуйста)

Answer 1

[Нікіта]

<div class="arrow">
	Пример блока со стрелкой CSS
</div>

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;   
	bottom: 100%;
	left: 50%;
	border-bottom-color: #eee;
	border-width: 9px;
	margin-left: -9px;
}

Comments

[xdevelx]

Неубедительно. Вот когда у блока и стрелки будут тени, тогда можно считать повторили за макетом.

[Нікіта]

У меня стояла цель повторить за макетом?

[xdevelx]

Нікіта Кошик, Очевидно, чтобы ответ был полноценным, нужно повторить форму и тени вокруг. Без этого не полноценный ответ получается. И желательно пример на codepen.

[Нікіта]

не могу из фигмы скопировать такую вот стрелочку, думал её спозиционировать относить блока
можно ли как-то свойствами css добиться эффекта такой стрелки, помогите пожалуйста)

Прочитай внимательно требования пользователя, там нет слов о форме, тем более, о тенях. А полноценный ответ у меня или нет, решать будет только Юрий Иванов

[Юрий Иванов]

Нікіта Кошик, Спасибо за помощь, дальше я уже под свой вариант все сам сделаю

Answer 2

[xdevelx]

Пример стрелки и тени вокруг блока и треугольника
https://codepen.io/xdevelx/pen/yLzmPGR

Comments

[Нікіта]

Неубедительно. Вот когда у блока будут скругленные углы, тогда можно считать повторили за макетом.

[xdevelx]

Нікіта Кошик, В данном случае все остальное - это декорации. Когда сделаете аналог моего примера, тогда и продолжим об убедительности.