Как сделать такую цитату?

Question

[Sergiu Mitu]

Высота блока само собой может быть разной.

Всем спасибо за помощь и потраченное время.

Answer 1

[Василь Бойко]

прочтите об :after или :before

Comments

[Sergiu Mitu]

это понятно, тут и разметка особо не важна, можно хоть миллион span-ов использовать, реализация интересует.

[Василь Бойко]

Сергей: сейчас сек) дайте только мне картинку, с таким уголком

[Sergiu Mitu]

самое трудное для меня это достичь прозрачность в этом конкретном месте белого бордера

[Sergiu Mitu]

psd https://drive.google.com/file/d/0ByxYz6n1c4X0X3JVN...
png https://drive.google.com/file/d/0ByxYz6n1c4X0SWt6e...

[Василь Бойко]

Сергей: ну немного не профессионально, но как на меня так сойдет :)
rghost.ru/private/7QDhRBwVd/d56b9076da6243b57e4db4...

[Sergiu Mitu]

Василь Бойко: хмм...костыль конечно ещё тот, но вполне себе вариант спасибо.

Answer 2

[sim3x]

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

Если ширина статическая и твой набор браузеров позволяет - использовать svg или цельный пнг для верхней части блока: скруглений и треугольника. Или без скруглений - нужно проверить как себя ведут браузеры border-radius + border-top: 0

Comments

[Philipp]

я бы еще блок вниз подложил с фильтом для размывания фона