Бокс DIV со стрелкой

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

При помощи обычного изображения стрелки и используя CSS, можно добиться создания блока DIV, который будет использован, например, для комментариев на страницах вашего блога:

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

<style type="text/css">
.commentbox{
background-color: #FFEBCD; 
width: 450px;
padding: 15px;
}

.commentfooter{
background: url(img/arrow2.gif) 20px 0 no-repeat; /* 20px 0 - горизонтальное и вертикальное положение стрелки. Отрегулируйте по желанию (например, 20px -5px) */
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}
</style>

Стрелка, как фоновое изображение, может несколько изменять своё местоположение, которое можно регулировать в строке:
background: url(img/arrow2.gif) 20px 0 no-repeat;.

2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть бокс (блок):

<div class="commentbox">
Это Ваш комментарий.<br>Это Ваш комментарий.<br>Это Ваш комментарий.
</div>
<div class="commentfooter">Ваше сообщение на <?php echo date( "d.m.y" ); ?>, 7:40 утра.
</div>

Используемое изображение:

Сохраните это изображение в папку img, которая должна находиться в одной директории с файлом вашей страницы. Фоновый цвет блока можно поменять в CSS в строке background-color и точно такой же цвет придать фоновому изображению (это легко сделать в программе Paint Net).

Спасибо за внимание. Буду рад, если ещё раз посетите мой сайт. Пока! L.M.