More than 5 years have passed since last update.

スニペット：CSSだけで実現するランキグングバナー表記

Last updated at 2017-02-18Posted at 2017-02-18

サイトで見つけたのでコピーしながら作ってみた。

CSSだけで実現するランキングバナー表記

こんな感じの
キャラクタランキングを作るためのコードを作ってみた。

html

<html>
  <body>

      <a class='sss'>
        <img src="2399.png" width="90px" height="90px" alt="">
      </a>
      <a class='sss'>
        <img src="" width="90px" height="90px" alt="">
      </a>
      <a class='sss'>
        <img src="" width="90px" height="90px" alt="">
      </a>
      <a class='sss'>
        <img src="" width="90px" height="90px" alt="">
      </a>
      <a class='sss'>
        <img src="" width="90px" height="90px" alt="">
      </a>
  </body>
</html>

CSS


    <style>
      .sss{
        counter-increment:rankingnumber;
      }
      .sss:before{
        position: absolute;
        color:#fff;
        font-size:10px;
        width:30px;
        height:30px;
        text-align:left;
        border:1px solid #777;
        background-color:#777;
        content:counter(rankingnumber) "位";
        box-shadow:10px 0 0 12px #666;
        -webkit-mask-image: url(svg.svg#top);
        -webkit-mask-size: cover;
      }

      .sss :after{
        position: absolute;
        content: '';
        margin-left: -36px;
        margin-top: -30px;
        display: block;
        border-radius:15px;
        width: 30px;
        height: 30px;
        border: 1px solid #777;
        mask-image: url(svg.svg#top);
        mask-size: cover;
      }
    </style>

SVG

svg.svg


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <style>
      g {
        display: none;
      }
      g:target {
        display: inline;
      }
    </style>
  </defs>

  <g id="top">
    <polygon fill="black" points="0 100 0 0 100 0"/>
  </g>

  <g id="bottom">
    <polygon fill="black" points="100 0 100 100 0 100"/>
  </g>

  <g id="top-reverse">
    <polygon fill="black" points="0 0 100 0 100 100"/>
  </g>

  <g id="bottom-reverse">
    <polygon fill="black" points="0 0 0 100 100 100"/>
  </g>
</svg>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up