cssでやじるしを作る方法を教えてください！

Question

これだけの要素に対してcssでやじるしを作りたいです。

<li>ダミー。やじるしをつけたいのは↓です。</li>
<li><a href="#">次へ</a></li>

やじるしの形は、こうです。

li:last-child a {
   color: #fff;
}

li:last-child {
   width: 70px;
   height: 40px;
   background-color: #003d96;
}

li:last-child:after {
   四角を作って回転してクリップ的な。
}

どうも、afterにうまく装飾を設定できず苦労してます。
まずそもそもできるのか？
どうやってやるのか？

よろしくお願いします。

Answer 1

すいませんちょっとhtmlもいじりました！
質問者様のhtmlの構造だと、liの下のaの後に要素が入ったりしたらcss自体が壊れそうなので、
htmlの形に依存しないような感じにしてます！
具体的にはどのタグにクラスをつけても動くみたいな！感じです！

 <li><a href="#" class="arrow arrow--blue">次へ</a></li>

.arrow{
      position: relative;
      color:#fff;
      display: inline-block;
      width: 70px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .arrow:after{
      position: absolute;
      top: 0;
      right: -40px;
      content: '';
      display: inline-block;
      border: solid 20px transparent;
    }

    .arrow--blue{background-color: #003d96;}
    .arrow--blue::after{border-left-color: #003d96;}

cssが長くて難しいかもしれませんが、arrowとarrow::afterで形を作成してます（この時点では透明）
そして、arrow--blue, arrow--blue::afterに背景色とボーダーの色の指定をつけてみました！

こうすることで「あー違う色の矢印が欲しい」と思った時に

.arrow--yellow{background-color: yellow;}
.arrow--yellow::after{border-left-color: yellow;}

みたいに、2行追加するだけで種類を増やせます！
（本当は1行だけで実装したかったんですが。。。( ；∀；)）

ちなみに、afterとか指定する場合はcontent: '';をつけないと動かないですよ！
僕も前にこれではまったので（笑）

頑張ってくださーい！

Comments

[7hikolin]

ありがとうございます！↓下の通り、自分でも一応できたのですが、こちらのほうが、便利で、正当な感じがするので採用させていただきます。

Answer 2

参考情報

• シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート http://coliss.com/articles/build-websites/operation/css/css3-breadcrumbs-by-red-team-design.html#h201

... 画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。...
デモページ
...

• CSS3を活用したパン屑リストを作成してみた http://www.yoheim.net/blog.php?q=20120521

Answer 3

すみません。できました。サクッとなので、崩れるかもしれませんが、だいたいこんな感じです。

li:last-child a {
   color: #fff;
}

li:last-child {
   position: relative;
   width: 60px;
   height: 40px;
   background-color: #003d96;
   text-align: center;
}

li:last-child:after {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   left: 60px;
   border: 40px solid transparent;
   border-right: 40px solid #003d96;
   transform: rotateY( 180deg );
}