Как сделать всплывающие окно с «ножной» на css?

Question

[cmtz]

Здравствуйте, подскажите, как реализовать такое окно?



Интересует как сделать этот треугольник? Его параметры следующие: основание 40px, стороны по 20px, а высота 10px (красная линия на схеме).
Также у всего этого блока (треугольник + прямоугольник) есть бордер и тень.

Из того что пробовал:
1. Делать квадрат 40 на 40, поворачивать его на 45 градусов, в таком случае высота треугольника получается 20px, что мне не подходит
2. Разные непотребства с прозрачными бордерами, тоже не подходит, т.к у этого треугольника должна быть и бордер.

Также подскажите как правильно называть эту "ножку"? Уж больно глупо заголовок вопроса выглядит, но не знаю, как иначе назвать)

Comments

[Сергей delphinpro]

Его параметры следующие: основание 40px, стороны по 20px, а высота 10px

Теорема Пифагора говорит, что такого треугольника не существует.

sqrt(10^2 + 20^2) = 22,36 != 20

Хотя и без расчетов ясно, что катет не может быть равен гипотенузе.

[Сергей delphinpro]

Также подскажите как правильно называть эту "ножку"?

назовите "носиком" =)

[cmtz]

Сергей delphinpro, взял на вооружение, еще в теории "хвостиком" можно прозвать)

Answer 1

[Сергей delphinpro]

sqrt(10^2 + 20^2) = 22,36 != 20

Исходя из этого, можно взять квадрат со стороной 22 пикселя, расплющить его в ромб (transform: skew(), градус посчитать или подобрать), повернуть на 45 градусов (transform:rotate()) и абсолютом прибить в нужное место.

Кроме того, можно использовать варианты с SVG или clip-path.

Comments

[cmtz]

Благодарю, transform: skew() помог!

Еще может поделитесь опытом по одному моменту? Если задавать отдельно день для этого квадрата и для прямоугольника с контентом, то они начнут пересекаться (тень от прямоугольника будет на треугольник), обычно, чтобы скрыть такие моменты, я создавал условный before с цветом фона и перекрывал им кусок тени.

Есть ли какой-нибудь более красивый вариант это сделать?

Answer 2

[Stalker_RED]

1. Если вы хотите чтобы сторона этого треугольника была равна 20, то какой смысл делать квадрат со стороной 40, а не 20?
2. Гипотенуза у вас указана как 40. Но если длина боковых сторон по 20, то их сумма в точности равна длине основания, и высота треугольника будет равна нулю.
3. Если все-таки сделать боковые стороны по 20 и высоту 10, то длинна основания будет равна 34.64, а верхний угол будет равен 120 градусам. То есть квадрат не подойдет.

В общем уточните какую "ножку" вам нужно, скорее всего подойдет псевдоэлемент с transform: skew.
В худшем случае можно clip-path применить или svg маску.

Comments

[cmtz]

Да, вы правы, я затупил с квадратом со стороной 40, конечно он должен быть со стороной 20, а transform: skew действительно помог.