【コピペでOK】画像に斜めのリボンを重ねる方法【CSS】
※記事が古いのでちょっと修正中
画像に斜めがけの『激かわリボン』をつける方法です( ◜◡‾)
かわいいので備忘録的にメモしておきます。
完成予想図は以下。
右上部分に『新着』とかをつけれます。
上記画像でいう『新着』の部分はテキストなので、簡単に変更可能です。
ではさっそく解説。
HTMLは以下を例にしていきます。
<div class="four columns">
<article class="post" id="#">
<div class="btitle">
<h2><a href="#" rel="bookmark" title="#">ここに記事のタイトル</a></h2>
<p id="topgazou-p"><span id="topgazou-text">新着</span></p>
</div>
</article>
</div>
上記HTMLに対して、以下のCSSをコピペ!
.four.columns {
position: relative;
color: #fff;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: Arial, sans-serif;
font-weight: 900;
}
.four.columns p #topgazou-text {
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: 16px;
background: #0085D2;
width: 100px;
padding: 1px 3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.four.columns p:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -15px;
right: 54px;
z-index: -1;
border: 17px solid;
border-color: transparent transparent #662121 transparent;
}
たったこれだけで『激カワのリボン』が完成!( ◜◡‾)
すばらしい〜。