Как с помощью css нарисовать фигуру?

Question

[megamutex]

Здравствуйте!
Нужно сделать тултип полупрозрачный вот такого плана:

Расположение "уголка" будет меняться, ширина самого тултипа тоже динамическая. Если бы не было полупрозрачности или хотя бы обводки, все было просто, но нужен тултип такой.
Подскажите самый адекватный способ сделать его.

Answer 1

[Дмитрий]

https://jsfiddle.net/soledar10/upkpfkaa/1/

Comments

[megamutex]

так я тоже могу, но нужна обводка)

[Дмитрий]

megamutex: Обновил

[megamutex]

Дмитрий: спасибо, думаю этот вариант мне подходит

Answer 2

[Андрей]

Можно так а дальше работаете с атрибутом points

Answer 3

[Андрей Федоров]

codepen.io/aliencash/pen/qRRgQE
К сож. у этого решения есть артефакты...

Answer 4

[zooks]

Заготовка здесь:
www.cssarrowplease.com
Подвинуть уголок вправо совсем несложно.

Comments

[megamutex]

Спасибо, но там уголок сплошным цветом. Если его сделать полупрозрачным, будет виден border основного блока