In diesem Beispiel wird ein sehr einfach aussehender Container mit abgerundeten Ecken gezeigt, um den Quellcode kurz zu halten und Ihnen die wesentliche Vorgehensweise zu demonstrieren. Wie Sie der Webseite CSS Play entnehmen können, lassen sich aber auch aufwendigere Effekte problemlos ohne Grafiken erzeugen.
.container {
margin: 60px;
width: 160px;
background: #59d; /* Farbe des Containers */
}
.container p {
margin: 8px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
}
.bg {
display: block;
background: #fff; /* Hintergrundfarbe */
}
.bg b {
display: block;
height: 1px;
overflow: hidden;
background: #59d; /* Farbe des Containers */
}
.container .r1 {
margin: 0 5px;
}
.container .r2 {
margin: 0 3px;
}
.container .r3 {
margin: 0 2px;
}
.container .r4 {
margin: 0 1px;
height: 2px;
}
<div class="container">
<b class="bg">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<p>
An dieser Stelle befindet sich der Inhalt
Ihres Containers. Wie Sie sehen, wirken
die Ecken abgerundet.
</p>
<b class="bg">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
