FreeArtists.ruFreeartists статьи и рецензии о технологиях

Волшебные бордюры

  • Алексей Петров aka Sq.Piglet
  • 4 декабря 2005

Вы не представляете какие интересные вещи можно делать на web-странице с помощью CSS свойства border!

Используя свойство border, вы можете не только выделять блочные элементы, но и рисовать множество видов графических примитивов, таких как: ромб, треугольник, трапеция и многое другое.

Поддержка CSS свойства border браузерами

Большинство современных браузеров (Opera 7+, Mozilla, Firefox) полностью поддерживают спецификацию CSS в отношении свойства border. Но есть и исключения:

  1. Internet Explorer 5 — искренне считает, что border может быть только solid (сплошная линия).
  2. Internet Explorer 6 — не знает про существование dotted и некоторых других вариантов border.

Создание заготовки для графических примитивов

Создадим пустой блочный элемент <div class="storage"></div> и CSS свойства для него:

<style type="text/css">
.storage{
	font-size:0;
	height:0
}
</style>

<div class="storage"></div>

Свойство font-size:0 задается, потому что Internet Explorer считает, что блочный элемент должен иметь вертикальный размер, соответствующий размеру шрифта по умолчанию, Т. е. 16 px. А свойство height:0 используется для того, чтобы Internet Explorer 5 отобразил пустой блочный элемент.

Примеры графических примитивов

Треугольник

Пример кода
<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.triangle{
	border-bottom:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:0
}
</style>

<div class="storage triangle"></div>

Трапеция

Пример кода
<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.trapezium{
	border-bottom:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:40px
}
</style>

<div class="storage trapezium"></div>

Будьте внимательны: Internet Explorer 5 неправильно обрабатывает размеры блочных элементов.

Ромб

Пример кода
<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.rhomb-up{
	border-bottom:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:0
}
.rhomb-down{
	border-top:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	width:0
}
</style>

<div class="storage rhomb-up"></div>
<div class="storage rhomb-down"></div>

Песочные часы

Пример кода
<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.sand-glass{
	border-top:50px solid #f90;
	border-left:50px solid #fff;
	border-right:50px solid #fff;
	border-bottom:50px solid #f90;
	width:0
}
</style>

<div class="storage sand-glass"></div>

Абстракция

Пример кода
<style type="text/css">
.storage{
	font-size:0;
	height:0
}
.abstraction{
	border-top:50px groove #f90;
	border-left:50px groove #f90;
	border-right:50px groove #f90;
	border-bottom:50px groove #f90;
	width:0
}
</style>

<div class="storage abstraction"></div>

Выводы

Используя различные комбинации CSS свойства border, можно, во-первых, добиться множества интересных эффектов, а во-вторых, избавиться от части оформительской графики.

6 комментариев

  1. PVasili

    Еще бы можно было треугольник сделать в % по высоте — цены бы не было…

    23 ноября 2008, 15:27
  2. 40a

    Звезда НАТО:

    31 января 2009, 15:18
  3. 40a

    Флаг Великобритании:
    <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>
    <html xmlns=»http://www.w3.org/1999/xhtml» >
    <head>
    <title>UK flag</title>
    <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />
    <style type=»text/css»>
    body{overflow:hidden;}
    #wrap{
    background-color:#fff;
    border:5px solid #eee;
    height:400px;
    margin:40px;
    position:relative;
    width:800px;
    }
    #wrap *{overflow:hidden; position:absolute;}
    #tl, #tr, #bl, #br{width:360px; height:160px; border-style:solid; border-color:#be0027;}
    #tl *, #tr *, #bl *, #br *{border-width:100px 200px; border-style:solid; height:0;}
    /*navy*/
    .tn {border-top-color:#00247d;}
    .rn {border-right-color:#00247d;}
    .bn {border-bottom-color:#00247d;}
    .ln {border-left-color:#00247d;}
    /*red*/
    .tr {border-top-color:#be0027;}
    .rr {border-right-color:#be0027;}
    .br {border-bottom-color:#be0027;}
    .lr {border-left-color:#be0027;}
    /*white*/
    .tw {border-top-color:#fff;}
    .rw {border-right-color:#fff;}
    .bw {border-bottom-color:#fff;}
    .lw {border-left-color:#fff;}
    /*transparent*/
    .tt {border-top-color:transparent;}
    .rt {border-right-color:transparent;}
    .bt {border-bottom-color:transparent;}
    .lt {border-left-color:transparent;}

    </style>
    <!—[if IE 6]>
    <style type=»text/css» media=»screen»>
    /*for IE*/
    .tt {border-top-color:pink; filter: chroma(color=pink);}
    .rt {border-right-color:pink; filter: chroma(color=pink);}
    .bt {border-bottom-color:pink; filter: chroma(color=pink);}
    .lt {border-left-color:pink; filter: chroma(color=pink);}
    </style>
    <![endif]—>

    </head>
    <body>

    <div id=’wrap’>
    <div id=’tl’ style=’border-width:0 40px 40px 0;’>
    <div id=’tl-navy’ class=’tn rn bt lt’ style=’top:-75px;left:-65px;’></div>
    <div id=’tl-red’ class=’tt rt br lr’ style=’top:-65px;left:-130px;’></div>
    <div id=’tl-white’ class=’tt rt bw lw’ style=’top:-65px;left:-190px;’></div>
    <div id=’lt-navy’ class=’tt rt bn ln’ style=’top:-65px;left:-215px;’></div>
    </div>

    <div id=’tr’ style=’right:0;border-width:0 0 40px 40px;’>
    <div id=’tr-navy’ class=’tn rt bt ln’ style=’top:-75px;right:-65px;’></div>
    <div id=’tr-red’ class=’tt rr br lt’ style=’top:-65px;right:-70px;’></div>
    <div id=’tr-white’ class=’tt rw bw lt’ style=’top:-65px;right:-130px;’></div>
    <div id=’rt-navy’ class=’tt rn bn lt’ style=’top:-65px;right:-215px;’></div>
    </div>

    <div id=’bl’ style=’bottom:0;border-width:40px 40px 0 0;’>
    <div id=’bl-red’ class=’tr rt bt lr’ style=’bottom:-65px;left:-70px;’></div>
    <div id=’bl-white’ class=’tw rt bt lw’ style=’bottom:-65px;left:-130px;’></div>
    <div id=’bl-navy’ class=’tt rn bn lt’ style=’bottom:-75px;left:-65px;’></div>
    <div id=’lb-navy’ class=’tn rt bt ln’ style=’bottom:-65px;left:-215px;’></div>
    </div>

    <div id=’br’ style=’right:0;bottom:0;border-width:40px 0 0 40px;’>
    <div id=’br-red’ class=’tr rr bt lt’ style=’bottom:-65px;right:-130px;’></div>
    <div id=’br-white’ class=’tw rw bt lt’ style=’bottom:-65px;right:-190px;’></div>
    <div id=’br-navy’ class=’tt rt bn ln’ style=’bottom:-75px;right:-65px;’></div>
    <div id=’rb-navy’ class=’tn rn bt lt’ style=’bottom:-65px;right:-215px;’></div>
    </div>
    </div>
    </body>
    </html>

    6 марта 2009, 1:03
  4. lita

    Великолепно!

    27 мая 2009, 22:02
  5. Mik

    Линию! Научите делать линию!

    22 января 2010, 14:04
  6. Bighamster

    Не догоняю, почему наклон то образуется, а не ожидаемый прямой угол?

    28 января 2011, 12:04

RSS комментариев