|
|
Блок с вырезанными уголками на CSSИнтересный вид уголков продемонстрировал западный разработчик. Квадратные вырезанные уголки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 |