|
|
Блок с вырезанными закруглёнными уголками на CSS
В этой статье предлагается пример реализации фигурных уголков.
Закруглённые вырезанные уголкиA box with cutout corners CSS/* Curved cutout Borders*/ .curved {background: transparent; width:40%; margin:0 auto;} .curved h1, .curved p {margin:0 10px;} .curved h1 {font-size:2em; color:#fff; letter-spacing:1px;} .curved p {padding-bottom:0.5em;} .curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;} .curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;} .curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;} .curved .b1 {margin:0 4px; background:#fff;} .curved .b2 {margin:0 4px; height:2px;} .curved .b3 {margin:0 3px;} .curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;} .curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;} HTML<div class="curved"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="boxcontent"> <h1>Закруглённые вырезанные уголки</h1> <p>A box with cutout corners</p> </div> <b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b> </div> Автор — Владимир Полухин Дата написания — 2008-01-28 |