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

2008-01-28 / Рубрика: 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