Terug | Naar sckripts.nl


Genereer de code
Hoekgrote
Color
Bgalpha (0-127, alleen manier 1)
Bgcolor
Dynamisch?
Stel de grote en de kleur in van de hoeken en klik vervolgens op update om het resultaat te zien. Hieronder kan je de broncodes vinden.

Voorbeeld manier 1
html code
			
<div class="box">
	<div class="box-tl">
		<div class="box-tr">
			<div class="box-bar"></div>
		</div>
	</div>
	<div class="box-content">
		Hier je content
	</div>
	<div class="box-bl">
		<div class="box-br">
			<div class="box-bar"></div>
		</div>
	</div>
</div>
css code
			
.box {
	width: 760px;
	margin: 0 auto;
}

.box-tl {
		background: url(links-boven.png) no-repeat top left;

}
.box-tr {
		background: url(rechts-boven.png) no-repeat top right;
}
.box-bl {
		background: url(links-onder.png) no-repeat bottom left;
}
.box-br {
		background: url(rechts-onder.png) no-repeat bottom right;
}
	
.box-bar{
	background-color: #eeeeee
	width: 100%;
	height: 10px;
}

.box-tl, .box-tr, .box-bl, .box-br {
	margin-left: 10px;
	padding-right: 10px;
	height: 10px;
}
.box-content {
	background-color: #eeeeee;
	margin: 0 10px;
	padding: 0 10px;
	overflow: auto;
}
Afbeeldingen
links-boven.png: corner.png
rechts-boven.png:corner.png
links-onder.png: corner.png
rechts-onder.png:corner.png

 
 
Voorbeeld manier 2

(zie tutorial Afgeronde hoeken aan vlakken geven )

html code
			
<div id="content">
        <div class="lb">&nbsp;</div>
        <div class="rb">&nbsp;</div>
		Content hier...
        <div class="lo">&nbsp;</div>
        <div class="ro">&nbsp;</div>
</div>
css code
			
* {
margin: 0px;
padding: 0px;
}
#content {
	width: 700px;
	margin: 0 auto;
	background-color: #eeeeee;
	position: relative;
	padding: 20px;
}
/* HOEK AFRONDINGEN */
.lb {
    background-position: left top;
    top: 0px;
    left: 0px;
}
.rb {
    background-position: right top;
    top: 0px;
    right: 0px;
}
.lo {
    background-position: left bottom;
    bottom: 0px;
    left: 0px;
}
.ro {
    background-position: right bottom;
    bottom: 0px;
    right: 0px;
}
.lb, .lo, .rb, .ro {
		background: url(corner.png);
    background-repeat: no-repeat;
    position: absolute;
    line-height: 10px;
    width: 10px;
}
Afbeeldingen
corner.png:
corner.png