Black Box

CSS3 の border-radius プロパティを用い、曲線を引いてみた。

結果の画像

CSS3 border-radius で表現した曲線のリボン

赤いリボンがくるっと巻いている感じ。左下角も少し曲げ、左の画像とより自然に繋げている。

CSS ルールと対応環境

h2
{
   border-right : 24px #D00 double;
   border-bottom:  5px #B00 double;
   /* Safari (イマイチ) */
   -webkit-border-top-right-radius:    40px;
   -webkit-border-bottom-right-radius: 90px;
   -webkit-border-bottom-left-radius:  20px;
   /* Firefox */
   -moz-border-radius:    0 40px 90px 20px;
   /* Opera, Chrome */
   border-radius:         0 40px 90px 20px;
}

当然ですが、border-radius プロパティを実装しているブラウザでしか意図した表示にはなりません。現時点では Presto (Opera 10.5)、Gecko (Mozilla Firefox 3.6)、Webkit (Google Chrome 2、Safari 4) などです。

（独自プロパティの）prefixなしはprefixありのあとにした方がいいと思うのには賛成なのでそうしました。早く統一されて欲しいなぁ。

主旨とは関係ないが

「『ゴスロリスタイル』って言うけど、なんかよくわからないよね、これ」と人に言われて残念な思いをしました。