Блок с вырезанными уголками на CSS

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

Интересный вид уголков продемонстрировал западный разработчик.

Квадратные вырезанные уголки

A box with cutout corners

CSS

/* Square cutout Borders*/
.square {background: transparent; width:40%; margin:0 auto;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}
 
.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}
 
.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}

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