Как сделать вогнутые углы у блока на CSS?

Question

[m4a1fox]

Доброго вермени суток. Может кто знает или пытался сделать следующее.
Имеем плашку (infoWindow) на карте как показано на картинке. Необходимо попробовать реализовать это средствами css.
Вопрос собственно заключается в том это реально вообще или нет. На момент написания этого вопроса, имеется вот это - jsfiddle.net/1yy9n648/1/.

Наверно тут можно попробовать сделать это с помощью svg? Ваше мнение?

Спасибо.

Answer 1

[Евгений Петров]

SVG. Такое SVG
В base64 во втором элементе переведено для поддержки IE.

Пример с врезкой по всем сторонам при любом размере на 10 пикселей.

Comments

[m4a1fox]

Черт подери. Спасибо. Кажется то что нужно. Скажите, вы это делали полностью сами? Или есть какая нибудь программа. Тем не менне - мое почтение. Спасибо.

[Appp Zooo]

клево но размер статичен, я надеялся что через шейпы получится и будет само изменяться с контентом по размерам

[m4a1fox]

Да, вы правы. Сразу не обратил внимания... Как же быть?

[Евгений Петров]

@alasecond: а что конкретно будет изменяться? Вот возьмём высоту 100 и 1000. Это значит, что изменится величина, на которую отступает фигура? Было 10 пикселей, а будет сколько? 100? 50? Это приведёт к тому, что и отступ будет меняться.

В общем, говоря об изменениях, покажите на рисунке для высоты 100 и 1000 как это будет.

[Евгений Петров]

@m4a1fox: к вам также относится. Покажите для высоты 100 и 1000 что и как именно вы хотите менять. Радиус кривизны боковых дуг в примере увеличил.

Насчёт «сам делал». Там путь с двумя почти одинаковыми парами дуг. Сложно ли написать для дуги пару координат смещения, 2 радиуса и 3 нуля? Очень. Я даже не знаю, как и справился-то. Едва сил хватило. Особенно на проставление двух минусов в копипасту двух первых дуг.
Или вы не знаете, как в base64 переводить?

[Appp Zooo]

@Petroveg: да я потестил все ок, чуть отступ уменьшил, ну это все конечно в пределах разумного :) 100-300 пикселей выглядит ок, я бы и не хотел видеть что-либо более чем 300, т.к. это уже не тултип получится

[Евгений Петров]

@alasecond: вот я посмотрел и не понравилось изменение горизонтальных дуг.
Слепил 4 фона codepen.io/cleric/pen/iIebg
Теперь дуги всегда «врезаются» на 10 пикселей.