Контейнер DIV с уголком

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

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

Демо-пример

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

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

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: transparent url(img/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}

</style>

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


<div class="curlycontainer">
<div class="innerdiv">
<h3>Название</h3><br>
Some text here.Some text here. Some text here.<br>
Some text here.Some text here. Some text here.<br>
Some text here.Some text here. Some text here.<br>
Some text here.Some text here.
</div>
</div>

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

Сохраните это изображение в папку img, которая должна находиться в одной директории с файлом вашей страницы.

Всё реально просто! Благодарю за проявленный интерес к моему скромному сайту. Пока! Ваш L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки