CSS-имитация блока со срезанными уголками

2008-01-28 / Рубрика: CSS

Сегодня я продемонстрирую создание блока с вырезанными уголками.

Срезанные уголки

Уголки, срезанные под углом 45 градусов

CSS

/* Chamfer Borders*/
.chamfer {background: transparent; width:40%; margin:0 auto;}
.chamfer h1, .chamfer p {margin:0 10px;}
.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
.chamfer p {padding-bottom:0.5em;}
 
.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
.chamfer .b1 {margin:0 5px; background:#000;}
.chamfer .b2 {margin:0 4px;}
.chamfer .b3 {margin:0 3px;}
.chamfer .b4 {margin:0 2px;}
.chamfer .b5 {margin:0 1px;}
.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}

HTML

<div class="chamfer">
 <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
 <div class="boxcontent">
  <h1>Срезанные уголки</h1>
  <p>Уголки, срезанные под углом 45 градусов</p>
 </div>
 <b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>

Автор — Владимир Полухин

Дата написания — 2008-01-28

Тоже самое что

Тоже самое что и скругление углов. Вариант рабочий, но громоздкий чересчур.

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".