|
|
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
Тоже самое что
Тоже самое что и скругление углов. Вариант рабочий, но громоздкий чересчур.