KATSTAT.RU-ТОП РЕЙТИНГ САЙТОВ С ОТДАЧЕЙ
Уникальная онлайн игра! ЗАЙДИ И ОЦЕНИ!
Дешёвый Хостинг Сайтов
Принимай платеж на свои сайты без блоков
WorldByte - Наш хостинг - партнер

Топ дня: etozhemaks

Вопрос:
Как мне подложить свою картинку под данный текст? Чтобы получился аналог цитаты.

Собственно.... Имею картинку (к примеру эту)

Я её разрезал на верх/середина/низ

Так

И так

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

Пока сообразил так (но это не то)

.macho {

     width: 96%;

 border: 8px solid #40c4c8;

     padding: 1px;

     -moz-border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif  ) 8 round round;

     -webkit-border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif  ) 8 round round; 

     -o-border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif  ) 8 round round;

     border-image: url(https://forumstatic.ru/files/001a/c0/03/99899.gif  ) 8 round round;

     background: #FFA07A; /* Цвет фона */

     display: inline-block;

     text-align: justify;

     text-size: 12px;

     font-family: Snell Roundhand, cursive;

     font-style: oblique;

 }

 

Изображение

------
81616_RGDcLkWgPft8.png (51.2 Kb)
Скачиваний: 106

Если что не я написал, в интернете взял
https://jsfiddle.net/asnwmf46/
________
посл. ред. 09.04.2022 в 07:44; всего 1 раз(а); by galtsev.t

>
Не грузит страницу

попробуй сейчас,у меня тоже подтупливает

galtsev.t, Вообще ни как

CSS

.blockquote {

     position: relative;

     text-align: center;

     margin: 16px 16px 34px 16px;

     border: 3px solid #337AB7;

     border-radius: 5px;

     padding: 2px 5px;

     font-size: 18px;

 }

 .blockquote:before,

 .blockquote:after {

     content: '';

     position: absolute;

     width: 0;

     height: 0;

 }

 .blockquote:before {

     left: 30px;

     bottom: -32px;

     border: 16px solid;

     border-color: #337AB7 transparent transparent #337AB7;

 }

 .blockquote:after {

     left: 35px;

     bottom: -21px;

     border: 12px solid;

     border-color: #fff transparent transparent #fff;

 }

 .blockquote cite {

     position: absolute;

     bottom: -28px;

     left: 62px;

     font-size: 15px;

     font-weight: bold;

     color: #337AB7;

 }

HTML

<blockquote class="blockquote">

     <p>Цитата</p>

     <cite>Автор</cite>

 </blockquote>

________
посл. ред. 09.04.2022 в 08:25; всего 1 раз(а); by Dusty

Dusty, так это просто цитата
Я же спросил свой блок .macho и менно картинкой верх/низ просто как бордер (типо top картинка, futer картинка, center картинка), а середина расягивается на всю высоту.

Зачем тебе такой гемор из картинок? Это же максимально не удобно.

Не мой это код, я его с того сайта скопировал и тебе скинул