よくありがちな、画像にCSSでリボンっぽいものが付いてるものを作ろうとしたら、できなくて死んだお話。もうね、耄碌ババアは生きてんのイヤになりますよ。何をやってもうまくいかない；；まあ、そもそもCSSが全然わかってないのな。わかってなけりゃできねえよな。
作りたかったのはコレですよ。
サルワカ「CSSで作る！綺麗なWeb用リボンデザイン22選」
「CSS、リボン」あたりで検索すると、いろんなサイトが出て来るのでコピペでなんとかなるんじゃないかと思ったけど、ならなかった；；このサルワカさんちのグレーの部分が写真画像になる…そういうことをしたかったわけです。
まあ基本がわかってないので、基本はどこで勉強すりゃいいの？とググったところ、わし的にはここがいい感じでした。
ふーん…なんとなく構造はわかったような希ガス。そうですかそうですか。でもね、でもできないのよ。最終的にできたのはここまで。
【HTML】col-md-4とかcol-sm-6は、bootstrapのグリッド割のために必要なクラスなので、今回まるっと無視でおk。
<div class="col-md-4 col-sm-6 ribbon-wrap">
<div class="ribbon">
<h4>かきくけこ</h4>
</div>
<img src="abcd.jpg" />
<h4>さしすせそ<br>
たちつてとなにぬねの</h4>
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお。
</div>
【CSS】
.ribbon-wrap {
position: relative;
}
.ribbon {
background-color: #ffc700;
margin: 0 15px 0 -15px;
padding: 5px;
position: absolute;
display: inline-block;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
top: 5px;
}
.ribbon h4{
vertical-align: middle;
margin: 0;
padding: 0 30px 0 20px;
border-top: dashed 1px #FFF;
border-bottom: dashed 1px #FFF;
line-height: 2em;
}
.ribbon:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 15px #e5b30d;
}
リボンの右端の切れ込んだところができない；；
この切れ込みのところって、あちこちのサイトで疑似要素のafterでやってるので、真似してみたけどダメぽ。こうなっちゃうのである。
【CSS】
.ribbon:after{
position: absolute;
content: '';
z-index: 1;
top: 0;
right: 0;
width: 0px;
height: 0px;
border-width: 24px 15px 24px 0px;
border-color: transparent #f1f1f1 transparent transparent;
border-style: solid;
}
まあ、この:afterのソースをよく見りゃダメすよね。これって黄色いリボンの後ろに当たる場所に、#f1f1f1の三角形を描くってことであって、その三角形で抜くってわけじゃないもんね（←よく読めよ！＜自分）。画像じゃなくて無地の場合なら背景色に合わせてやればOKなんだけど、画像だとなあ。なんか方法あるのかなあ。未だにわからず泣きぬれているのであった。フォトショなら簡単なのに。しくしく。
