Mibrt Blog | Blog píše Michal Brtníček, webdesign a Apple, html, css, php - Div se zakulacenými rohy

Na diskusních forech se poslední dobou vyskytují čím dál častěji dotazy, jak co nejlépe nastavit u div zaoblené rohy. Tato fičůrka se určitě dá vytvořit více způsoby, ale dnes si probereme snad tu nejjednodušší a nejuniverzálněší možnost.

Co budeme potřebovat:

6x div
4x obrázek zakulaceného rožku

Připravíme si 4 obrázky, které budou sloužit jako rožky pro náš výtvor. Kvůli kompatibility s IE6, který nepodporuje alfa kanál u obrázku .png, nebudou naše rožky s průhledným pozadím, proto jako pozadí rožků zvolíme pozadí stránky, což bude v našem případě bílá barva.

HTML struktura

Nyní si napíšeme kod, jak to bude vypadat v našem html dokumentu.

<div class="obdelnik">
	<div class="vrch"><div>div>div>
	<div class="stred">obsah našeho čtverečku může být jakkoliv veliký, čtvereček se nám bude roztahovat a nemusíme jej dál editovatdiv>
	<div class="spodek"><div>div>div>
div>

CSS

No a nyní té změti divů dodáme pomocí CSS život a řekneme jim, jak se mají chovat:

.obdelnik {
	width: 200px;
	background-color: #CCDDE2;
	margin: 20px;
	padding: 0px;
}

.vrch , .spodek , .vrch div , .spodek div {

	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat;
	width: 100%;
	height: 9px;
	font-size: 1px; /// kvůli IE6 je třeba nízkým divům nastavit malé písmo
}

.vrch div , .spodek div {
background-position: right top;
}

.vrch , spodek {
	background-position: left top;
}


.stred {
	color: #000000;
	padding: 10px;
	margin: 0px;
}

.vrch {background-image: url(1.png);}
.vrch div {background-image: url(2.png);}
.spodek {background-image: url(3.png);}
.spodek div {background-image: url(4.png);}

Závěrem

Tady tento postup je kompatibilní s IE6, IE7, Firefoxem, Operou a určitě i v dalších browserech. Výsledek si můžete zobrazit zde. Pokud máte k postupu dotazy nebo návrhy, tak se nebojte vyjádřit v komentářích.