CSSだけで作るパステル調の立体的リボン(CSS-3D-Ribbon)…斜め掛け編

CSS3 の「transform」プロパティの「rotate(回転)」を使って…

過去記事の…

 CSSだけで作るパステル調の立体的リボン(CSS-3D-Ribbon)

…で作った立体的リボン(CSS-3D-Ribbon)を…

親要素の右上に…100px の長さで…

45度傾けて掛けてみましょう…

基本となるパステル調の立体的リボン(CSS-3D-Ribbon)に関しては…

上記過去記事をお読み下さい…導入するとモダンブラウザでは…

こんな感じに見えます…

下記サンプルが…

左記画像のように見えない方は…

過去記事を参照して…

モダンブラウザに乗り換える事を強くお奨めします…

私は…「X-Iron」をメインで使っています…

 ウエブ標準準拠ウエブブラウザ利用の奨め…

 「X-Iron」のダウンロードファイル保存場所の変更と起動時の「TrayTip」削除

という訳で…導入しても…

正常に表示されない環境もある事を理解したうえで…

使い所を熟考して導入して下さい…

先ずは…CSS です…１・３・５・７行目は不要です…

立体的リボン(CSS-3D-Ribbon)斜め掛け用の CSS

/* 親要素「ribbon-back」に追加する CSS */
position:relative;
/* リボン要素「h4」の HTML に追加する CSS */
style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center"
/* 45度傾けるための設定 */
.degrees{-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg)}
.degrees-l{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg)}
/* 折り返し三角形部分 */
.左三角形のクラス名{width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid 色;bottom:-7px;left:1px;position:absolute}
.右三角形のクラス名{width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid 色;bottom:-7px;right:1px;position:absolute}

下記…サンプルの HTML と対比させてご覧下さい…

２行目は必須ですから過去記事の CSS に追加して下さい…

既に過去記事の立体的リボン(CSS-3D-Ribbon)を導入済みの方でも…

追記しても導入済みの立体的リボン(CSS-3D-Ribbon)に影響はありません…

４行目は「100% リボン」を使いますので…

追記すると導入済みの立体的リボン(CSS-3D-Ribbon)に影響しますので…

マークアップ時に HTML に直に記述します…

長さを変える場合は表示させる位置も調整して下さい…

「45度傾けるための設定」は…左上にリボンをかけたい場合…

「.degrees-l」を使用して下さい…

折り返し三角形部分の CSS は…

頻繁に使用する方は設定した方が楽チンですが…

私は…ヘッダーの１箇所でしか使っていないので…

サンプルの HTML のように直に記述しています…

必要な方のみクラス名と色を設定して必要な数だけ…

CSS に記述して下さい…

６色のサンプルです…

Ribbon White Lorem ipsum dolor sit amet, vim idque ullum ex, timeam	Ribbon Blue Lorem ipsum dolor sit amet, vim idque ullum ex, timeam	Ribbon Red Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
Ribbon Yellow Lorem ipsum dolor sit amet, vim idque ullum ex, timeam	Ribbon Green Lorem ipsum dolor sit amet, vim idque ullum ex, timeam	Ribbon Purple Lorem ipsum dolor sit amet, vim idque ullum ex, timeam

上記画像とサンプルでは…

折り返し三角形の色を変えています…

上記画像の折り返し三角形の色は「#6a6a6a」で統一しています…

上記サンプルの HTML マークアップです…

テーブルで整列させていますが…

テーブル部分は省略してあります…

上記サンプルの HTML マークアップ

<div class="ribbon-back" style="width:100px;">
<h4 class="ribbon01 degrees" style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center">Ribbon White<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #c9c9c9;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #c9c9c9;bottom:-7px;right:1px;position:absolute"></span></h4>
Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
</div>
<div class="ribbon-back" style="width:100px;">
<h4 class="ribbon02 degrees" style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center">Ribbon Blue<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95bfea;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95bfea;bottom:-7px;right:1px;position:absolute"></span></h4>
Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
</div>
<div class="ribbon-back" style="width:100px;">
<h4 class="ribbon03 degrees" style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center">Ribbon Red<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #ea9595;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #ea9595;bottom:-7px;right:1px;position:absolute"></span></h4>
Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
</div>
<div class="ribbon-back" style="width:100px;">
<h4 class="ribbon04 degrees" style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center">Ribbon Yellow<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #eaea95;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #eaea95;bottom:-7px;right:1px;position:absolute"></span></h4>
Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
</div>
<div class="ribbon-back" style="width:100px;">
<h4 class="ribbon05 degrees" style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center">Ribbon Green<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95ea95;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #95ea95;bottom:-7px;right:1px;position:absolute"></span></h4>
Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
</div>
<div class="ribbon-back" style="width:100px;">
<h4 class="ribbon06 degrees" style="font-weight:900;position:absolute;top:6px;right:-39px;width:100px;text-align:center">Ribbon Purple<span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #9595ea;bottom:-7px;left:1px;position:absolute"></span><span class="degrees" style="width:0;height:0;line-height:0;border-left:10px solid transparent;border-bottom:10px solid #9595ea;bottom:-7px;right:1px;position:absolute"></span></h4>
Lorem ipsum dolor sit amet, vim idque ullum ex, timeam
</div> 

サンプルですので…

親要素の「ribbon-back」の横幅を「100px」にしています…

ご自身のサイトに合わせて「ribbon-back」の横幅を…

CSS に記述するか…直に記述するか…新たに設定するか…して下さい…

親要素のテキストは…

リボンと被った部分は見えなくなりますので…

適宜…改行で対応して下さい…

以上です…お疲れ様でした…

jQuery jQuery / Extra JavaScript Current-Label : Design