もみのころぐ

テーブルレイアウトしか知らんババアが、慣れないツールいじって脳みそのリハビリをする美貌…おっと備忘録。

WEB・WORDPRESS

画像にCSSでリボン飾りを付けようとしたらできなくて死ぬ

投稿日:2018年3月4日 更新日:

よくありがちな、画像にCSSでリボンっぽいものが付いてるものを作ろうとしたら、できなくて死んだお話。もうね、耄碌ババアは生きてんのイヤになりますよ。何をやってもうまくいかない;;まあ、そもそもCSSが全然わかってないのな。わかってなけりゃできねえよな。

作りたかったのはコレですよ。

サルワカ「CSSで作る!綺麗なWeb用リボンデザイン22選」

「CSS、リボン」あたりで検索すると、いろんなサイトが出て来るのでコピペでなんとかなるんじゃないかと思ったけど、ならなかった;;このサルワカさんちのグレーの部分が写真画像になる…そういうことをしたかったわけです。
まあ基本がわかってないので、基本はどこで勉強すりゃいいの?とググったところ、わし的にはここがいい感じでした。

XTRA BLOG「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なんだけど、画像だとなあ。なんか方法あるのかなあ。未だにわからず泣きぬれているのであった。フォトショなら簡単なのに。しくしく。

-WEB・WORDPRESS

執筆者:

関連記事

俺メモ:死なないように、HTML+CSSの無料テンプレダウンロードサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、サイト作成用のベースになる、HTML+CSSの無料テンプレダウンロードサイトをメモっとく。 でも、前にちょこっとやったことあんだけど、元々のテンプレ …

公式テーマ「Habakiri」をカスタマイズ(2)

『公式テーマ「Habakiri」をカスタマイズ』の2回目です。コーポレートサイトっぽくするために、まず、トップページによくありがちなスライドショーを組み込み、スライドショーの下に、3カラム分の情報エリ …

公式テーマ「Habakiri」をカスタマイズ(4)

『公式テーマ「Habakiri」をカスタマイズ』の4回目、最終回です。トップページに、投稿データのカテゴリ毎に新着情報を表示します。 目次1 新着情報をフロントページ上にリスト表示する1.1 func …

俺メモ:死なないように、CSSスタイリングのコードコピペ元になるサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、コードのパクリ元をメモっとく。順番にベンキョーすっしかねえなあ。 そのうち、HTML+CSSのベーステンプレがあるサイトとか、サイトデザイン集めたと …

さらば、Samara Oblastの友よ

このブログはまだ実験中なので、あまり人にアドレスを言っていない。言っていない状態でアクセスとかあるものなのか、Google Analyticsを突っ込んで覗いているのだが、ある日、ロシアからのアクセス …