MAGAZINE

Twitter
Facebook
KEYWORDS

レスポンシブのリボン見出し

CSS

デザインデータの見出しを見たときに、ページのサイズによって変動するリボン型見出しだったので、どうにかしてレスポンシブにしたいと試行錯誤してできたので、手順を公開。

 

完成品イメージ

要素の書き出し

  • 背景パターンが存在する
  • ボーダーで周りが囲まれてる
  • リボン型になっている

 

HTML

<h3 class="title__number"><span class="title__number-inner">１</span></h3>

SCSS

.title__number{
    background-image: url('../assets/title-bg-slash.png');
    border-top: 1px solid $color-base;
    border-bottom: 1px solid $color-base;
    position: relative;
    text-align: center;
    min-height: 1.5em;
    &-inner{
      display: inline-block;
      background-color: #fff;
      color: $color-theme;
      border-radius: 50%;
      padding: 0.1em 0.6em;
      font-size: 24px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &::before,
    &::after{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto;
      width: 20px;
      height: 100%;
    }
    &::before{
      background:linear-gradient(to bottom left, transparent 50%, $color-base 50%, $color-base 53%, $color-theme 53%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left,  transparent 50%, $color-base 50%, $color-base 53%, $color-theme 53%) bottom left / 100% 50% no-repeat;
      left: 0;
    }
    &::after{
      background:linear-gradient(to bottom right, transparent 50%, $color-base 50%, $color-base 53%, $color-theme 53%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right,  transparent 50%, $color-base 50%, $color-base 53%, $color-theme 53%) bottom left / 100% 50% no-repeat;
    right: 0px;
    }
  }

 

総括

1. 今回の作り方は、背景画像をhタグに設定
2. borderで全体に線を引く
3. 擬似要素を使用してコンテンツの背景色と同様の色を重ねてリボン型に見せる。

今回はgradientを使用しています。
背景色→線色→透明という順番になるようにしています。

左右の線がなくても問題無いデザインであればborderでも対処可能でした。