2017/06/17
リボンというには簡単ですが、自分でリボンを作れるように手順を追って作っていきます。参考）リボン別ウィンドウで開きます。ソ
微妙な差異でいくつも書き方がありますので数あるやり方の一つだと思ってください。最短、最良ではありませんが、理屈をわかっていつでも自分の手で作れるようにと思っています。
今回作成しようと思っているのは、上のような簡単なものです。
CSSで三角 でも簡単に説明していますが、縦横0px（のブロックを形成する要素）にボーダーを設定すると三角形を表示することができます。
このような感じです。
CSS
{
width:0;
height:0;
border-top:25px solid #000;
border-right:25px solid #f00;
border-bottom:25px solid #0f0;
border-left:25px solid #00f;
}
リボンの左端には左の部分（上の例でいうと青のところ）を背景色と同じ白にして、残りの3か所はリボン本体と同じ色にしてあげればOKです。
これら3つのパーツが横並びになればリボンの出来上がりです。
HTML
<div class="before"> </div>
<div class="ribbon">Happy Birthday</div>
<div class="before"> </div>
CSS
.before{
width:0;
height:0;
border-top:25px solid #f60;
border-right:25px solid #f60;
border-bottom:25px solid #f60;
border-left:25px solid #fff;
}
.ribbon{
height:50px;
line-height:50px;
background-color:#f60;
text-align:center;width:300px;
}
.after{
width:0;
height:0;
border-top:25px solid #f60;
border-right:25px solid #fff;
border-bottom:25px solid #f60;
border-left:25px solid #f60;
}
HTMLとCSSは上のようになります。
あとはpositionなどを使って横に並べるか、すべてにfloat:leftを設定してあげて後続要素でclearしてあげてもいいかと思います。ただ、HTMLにリボンの装飾用の要素が前後についているのが気になったりしますのでbeforeとafterの疑似要素を使ってあげるとHTMLがすっきりします。更にbeforeクラスとafterクラスによく似た設定があるので共通のものはまとめておこうと思います。
HTML
<div class="ribbon">Happy Birthday</div>
前後はbeforeとafterの疑似要素を使うので簡単になりました。
CSS
.ribbon{
position: relative; /* beforeとafterの基準位置 */
height:50px;
line-height:50px;
background-color:#ff6600;
text-align:center;
width:300px; /* display:inline-block;とpaddingで文字長さに合わせる方法もあり */
}
.ribbon::before,
.ribbon::after{
content: ''; /* 空っぽの要素
display:block; /* 一応ブロックレベルにするposition: absolute;で不要になるが */
position: absolute;
top:0;
width:0; /* position: absolute;で不要になっているが流れ的に */
height:0; /* position: absolute;で不要になっているが流れ的に */
border-width: 25px 25px;
border-style: solid;
border-color:transparent; /* 透明にして背景色の変更に対応 */
}
.ribbon::after{
right:0;
border-right-color: #fff;
}
.ribbon::before{
left:0;
border-left-color: #fff;
}
とこのようになります。
疑似要素をdisplay:block;にいったんしています。順を追って作成するときに width:0; height:0;が効かずに微妙な高さが発生し左右のボーダーが三角になりません。しかしながら、 position: absolute;を設定するとdisplay:block;にしなくても自動的に幅も高さも0になります。なので本来は display:block; width:0; height:0;の3つは不要です。
そしてbeforeとafterの疑似要素はclass="ribbon"の内側に置かれますのでribbonクラスのマージンの内側、背景色のある所に重なります。なのでborder-color:transparent;にしておけばribbonクラスの背景色が変更されてもbeforeとafterは触る必要はありません。
裏を返せば白い部分は透明ではありませんので白背景以外にこのままリボンを置けば左右の白三角は白のままになります。
他にもいろいろな装飾のリボンが作れるようですが、この辺りが基本になると思いますのでご自身で作成してみてください。
