The current article
CSSで画像にリボンを斜めがけする
最近リボンで装飾されたサイトや画像を良く目にします。
今回は画像加工ではなく、HTMLとCSSで斜めがけのリボンを表現できるサイトをご紹介します。
リボンの文字も変更できるので便利じゃないでしょうか。
capture
Creating CSS3 Image Ribbon Tagsです。
英語のサイトですが、スクリプトとか入っていないのでHTMLとCSSをコピペだけで使えますので簡単～。
HTML記述例
<div class="side-corner-tag">
<img src="1.jpg" alt="" />
<p><span>newest</span></p>
</div>
まず、クラス名をつけたdivを作り、画像を配置。
リボン内に入るテキストをspan内に入力します。
CSS記述例
まず、クラスを定義
.side-corner-tag {
position: relative;
color: #fff;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: Arial, sans-serif;
font-weight: 900;
}
.side-corner-tag p {
display: inline;
}
続けて、リボン幅を決め、リボンを傾け、シャドウます。
.side-corner-tag p span {
position: absolute;
display: inline-block;
right: -25px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
text-align: center;
text-transform: uppercase;
top: 22px;
background: #d93131;
width: 100px;
padding: 3px 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
そして、リボンが立体的に見えるように三角形を作成します。
.side-corner-tag p:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -17px;
right: 69px;
z-index: -1;
border: 17px solid;
border-color: transparent transparent #662121 transparent;
}
.side-corner-tag p:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 74px;
z-index: -1;
right: -10px;
border: 17px solid;
border-color: #662121 transparent transparent transparent;
}
このサイトは、コリスさんが詳しく日本語（div要素版のコード付き）で紹介して下さってますので
画像やパネルに斜めにしたリボンを重ねるスタイルシートを参考にして下さいね。
コリスさんに感謝！
関連記事
