hörn i 45 graders vinkel skapas med samma metod som runda hörn men med 1 pixels regelbundna steg i storlekarna på boxarna. Detta exempel använder 10 boxar.

 

 

<head>
<style type="text/css">
<!--
#container {background: #006699; width: 250px; margin-right: auto; margin-left: auto;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 10px; height: 1px; overflow: hidden; background: #006699;}
.r2{margin: 0 9px; height: 1px; overflow: hidden; background: #006699;}
.r3{margin: 0 8px; height: 1px; overflow: hidden; background: #006699;}
.r4{margin: 0 7px; height: 1px; overflow: hidden; background: #006699;}
.r5{margin: 0 6px; height: 1px; overflow: hidden; background: #006699;}
.r6{margin: 0 5px; height: 1px; overflow: hidden; background: #006699;}
.r7{margin: 0 4px; height: 1px; overflow: hidden; background: #006699;}
.r8{margin: 0 3px; height: 1px; overflow: hidden; background: #006699;}
.r9{margin: 0 2px; height: 1px; overflow: hidden; background: #006699;}
.r10{margin: 0 1px; height: 1px; overflow: hidden; background: #006699;}
.content {padding: 0px 10px;}
-- >
</style>
</head>

<body>
<div id="container">
<div class="roundtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5"></div>
<div class="r6"></div>
<div class="r7"></div>
<div class="r8"></div>
<div class="r9"></div>
<div class="r10"></div>
</div>
<div class="content">Text och innehåll här... </div>
<div class="roundbottom">
<div class="r10"></div>
<div class="r9"></div>
<div class="r8"></div>
<div class="r7"></div>
<div class="r6"></div>
<div class="r5"></div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>