Используем тег hr с фоновым изображением

lena1

クリエイター
LV
0
 
<i>Тег <hr> (горизонтальная линия) является отличным средством для семантического разделения или прерывания контента на странице. Можно заменить его на изображение, которое будет гармонировать с общей стилистикой страницы.</i>

По умолчанию тег <hr> формирует простую и довольно уродливую линию или монструозную 3D обводку.
С помощью свойства CSS background можно задать использование изображения, обратив внимание на высоту элемента, чтобы использовать только одну копию картинки, и на отсутствие обводки:

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {
&nbsp;&nbsp;&nbsp;&nbsp;background:url(spiral-shape.png) no-repeat top center;
&nbsp;&nbsp;&nbsp;&nbsp;height:42px;
&nbsp;&nbsp;&nbsp;&nbsp;border:none !important;
}<!--c2--></div><!--ec2-->

Как обычно, всю простоту нарушает Internet Explorer (версии 7 и меньше), для которого потребуется использовать специфический код CSS (конечно, если вы собираетесь поддерживать IE).
Можно сделать отдельный файл CSS для IE и подключить его к странице с помощью условного комментария, например, так:

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><!--[if lte IE 7]>
&nbsp;&nbsp;&nbsp;&nbsp;<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]--><!--c2--></div><!--ec2-->

А для корректного вывода изображения вместо горизонтальной линии использовать следующий код для IE (в файле ie.css):

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->hr {
&nbsp;&nbsp;&nbsp;&nbsp;display:list-item;
&nbsp;&nbsp;&nbsp;&nbsp;list-style:url(spiral-shape.png) inside;
&nbsp;&nbsp;&nbsp;&nbsp;filter:alpha(opacity=0);/* избавляемся от горизонтальной линии */
&nbsp;&nbsp;&nbsp;&nbsp;width:0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* предотвращаем копирование изображения */
&nbsp;&nbsp;&nbsp;&nbsp;margin-top:-10px;
}<!--c2--></div><!--ec2-->
 
Сверху