Помощь в css (позиционирование картинки)

ishimov
На сайте с 08.10.2010
Offline
141
444

Подскажите, каким образом сделать нужный фон для стиля текста

На этой странице делаю раздел вопрос/ответ, хочу оформить сообщения в виде прямоугольников с закругленными краями и стрелочкой внизу (типо как диалог в разных меседжерах). Как сделать заливку с закругленными краями и применить ее к тексту через стиль я разобрался, настроил отступы, всё устраивает.

Не могу решить вопрос со стрелочкой(уголком) внизу каждого блока (стрелочка у меня специально пока сделана серой, чтобы ее было видно). С позиционированием вроде как разобрался, но когда опускаю ее в нужное место ее становится невидно, т.к. она начинает выходить за границы блока.

Как лучше реализовать задумку?? Спасибо!

Сопровождение тендеров (http://good-tender.ru) от Good-tender.Ru - обслуживание по всей России. А также кладезь полезной информации в сфере госзакупок по 44-ФЗ и 223-ФЗ
Mad_Man
На сайте с 10.11.2008
Offline
162
#1

Пример на jsfiddle с последними наработками заметно ускорит получение результата.

Нарисуйте хотя бы то, как оно должно выглядеть в конечном итоге.

vlad00777
На сайте с 24.12.2009
Offline
119
#2

Гуглить учитесь: Стрелки для блоков

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
ishimov
На сайте с 08.10.2010
Offline
141
#3
Mad_Man:
Пример на jsfiddle с последними наработками заметно ускорит получение результата.

Нарисуйте хотя бы то, как оно должно выглядеть в конечном итоге.

Спасибо за совет конечно, но думаю пока разберусь в этом сервисе времени потрачу столько же))

Да просто треугольник этот серый надо опустить чуть ниже НО чтобы его было видно, т.к. сейчас при опускании он пропадает по мере выхода за границы...

вот так

---------- Добавлено 22.11.2014 в 01:22 ----------

vlad00777:
Гуглить учитесь: Стрелки для блоков

😮 да, такое решение в голову не приходило даже. Возможно так и сделаю. Но всё же хотелось бы научиться именно своим изображением добиваться результата, это ведь гораздо больше возможностей открывает...

Спасибо!

vlad00777
На сайте с 24.12.2009
Offline
119
#4
ishimov:
Но всё же хотелось бы научиться именно своим изображением добиваться результата, это ведь гораздо больше возможностей открывает...

Как раз таки наоборот. Больше css, меньше картинок, скриптов и прочего. Вот более расширенный сервис: клац генерируйте любые стрелки. Если загагулины какие-то то так же через афтер, в чем проблема?

ishimov
На сайте с 08.10.2010
Offline
141
#5
vlad00777:
Если загагулины какие-то то так же через афтер, в чем проблема?

видимо в опыте, знаниях)

Mad_Man
На сайте с 10.11.2008
Offline
162
#6
ishimov:
вот так

Тупой вариант с тремя дивами: в верхнем position: relative, в первом вложенном кусок мессаги, во втором изображение с position: absolute для потери физического веса. Далее на последний вешаем left: 0 (прижмёт к левой боковине сообщения), bottom: 0 (прижмёт к самому низу). Далее на него же top и right в пикселях по фантазии (пока не упадёт под мессагу).

ishimov
На сайте с 08.10.2010
Offline
141
#7
Mad_Man:
Тупой вариант с тремя дивами: в верхнем position: relative, в первом вложенном кусок мессаги, во втором изображение с position: absolute для потери физического веса. Далее на последний вешаем left: 0 (прижмёт к левой боковине сообщения), bottom: 0 (прижмёт к самому низу). Далее на него же top и right в пикселях по фантазии (пока не упадёт под мессагу).

Кажется понял суть, сейчас поиграю с вышепредложенным вариантом и буду делать.

Всем огромное спасибо!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий