Как сделать прозрачную стрелку с border?

Question

[Рамиль]

Привет. Нужно сделать что то подобное habrahabr.ru/post/161041
Тоесь я никак не найду способ сделать такую же стрелку как описано и что бы у блока с всплывающим текстом был прозрачный фон. Мне кажется такие стрелки можно делать только для блоков с фоном.

Comments

[Рамиль]

Да я хочу что бы внутри стрелки тоже был прозрачный фон. Но если там сделать полупрозрачность то появляется линия бордюра. У меня есть картинки этих стрелок? Можно ли как то организовать картинками. Задача наверное уже сто раз решалась разными людьми. Не хочу к дизайнеру идти.

Answer 1

[Виталий Инчин ☢]

Такое сделать не получится, если только с использованием фонового изображения для стрелки (А нижняя граница блока - на самом деле будет состоять из псевдоэлементов стрелки, двух линий).

я придумал только такой вариант: jsfiddle.net/3w1f0spo
Но по каким-то причинам owerflow-y съедает и контент по x.

Comments

[Алексей Уколов]

А теперь попробуйте добавить туда border, про который автор изначально написал :)

[Мак Алексей]

Вот только надо будет решить проблему с такими вещами как border, box-shadow. Они будут накладываться поверх стрелки.

[Алексей Уколов]

Виталий Инчин: насколько я понял, автор хочет сделать так, как в статье на скриншоте, но вместо желтого фона - прозрачный.

[Виталий Инчин ☢]

Алексей Уколов: а, все, допер, не выйдет у него так.

[Мак Алексей]

Точнее, видны сквозь неё.

[Рамиль]

Да я хочу что бы внутри стрелки тоже был прозрачный фон. Но если там сделать полупрозрачность то появляется линия бордюра. У меня есть картинки этих стрелок? Можно ли как то организовать картинками. Задача наверное уже сто раз решалась разными людьми. Не хочу к дизайнеру идти.

[Виталий Инчин ☢]

Рамиль: давайте картинку - покажу.

[Рамиль]

Виталий Инчин: Есть фоновая картинка у всего body над ним прозрачный блок с бардюрами. И слева у блока есть стрелка . hkar.ru/Dbvl

[Виталий Инчин ☢]

Рамиль: я придумал только такой вариант: jsfiddle.net/3w1f0spo
Но по каким-то причинам owerflow-y съедает и контент по x, так что линии торчат.

Answer 2

[robotcigan]

Я так понимаю это немного не то? Или такой вариант подойдет?
codepen.io/anon/pen/oXRqMM

Comments

[Виталий Инчин ☢]

Не, автор хотел именно без черты