角丸四角形の HTML+CSS 実装コード

<スタイル タイプ="text/css">
.spiffy{ディスプレイ:ブロック}
.スパイフィー *{
表示:ブロック;
高さ:1px;
フォントサイズ:.01em;
オーバーフロー:非表示;
背景:#b20000}
.spiffy1{
左マージン:3px;
右マージン:3px;
パディング左:1px;
パディング右:1px;
左境界線:1px 実線 #870000;
右ボーダー:1px 実線 #870000;
背景:#9f0000}
.spiffy2{
左マージン:1px;
右マージン:1px;
パディング右:1px;
パディング左:1px;
左境界線:1px 実線 #6f0000;
右ボーダー:1px 実線 #6f0000;
背景:#a30000}
.spiffy3{
左マージン:1px;
右マージン:1px;
左ボーダー:1px 実線 #a30000;
右ボーダー:1px 実線 #a30000;}
.spiffy4{
左境界線:1px 実線 #870000;
右ボーダー:1px 実線 #870000}
.spiffy5{
左境界線:1px 実線 #9f0000;
右ボーダー:1px 実線 #9f0000}
.spiffyfg{
背景:#b20000}
</スタイル>

<div スタイル="背景:#680000; パディング:20px">
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div style="background:#b20000; height:100px; font-size:30pt; text-align:center;">
&bull;&bull;&bull;
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>