リボン風見出しのつくり方

こんにちは。今日はCSSでリボン風見出しをつくろうと思います！

イメージはこんな感じです↓

ちなみに、この方法だと2行までなら崩れずに実装できます。

では、さっそくコードをみていきましょ〜！

コード

HTML編

      <section class="contSect">
        <div class="inner">
          <h2 class="sectTit">リボン風見出し</h2>
        </div>
        <!-- / .inner -->
      </section>
      <!-- /.contSect -->

CSS編

.contSect .sectTit {
  position: relative;
  font-weight: bold;
  line-height: 1.3;
  overflow: hidden; /*領域外を非表示に */
  text-align: center;
  color: #fff;
  background: #ffa13d;
}

.sectTit:before,
.sectTit:after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  transform: scaleY(1.8) translateY(-50%);
  transform-origin: 0 0; /*設定必須 */
  border-style: solid;
  z-index: 0;
}

.sectTit:before {
  right: 100%;
  border-color: transparent transparent transparent #fff;
}

.sectTit:after {
  left: 100%;
  border-color: transparent #fff transparent transparent;
}

@media only screen and (min-width: 769px) {
  .contSect .sectTit {
    margin: 0 -10px;/*インナーより少し大きく */
    padding: 0.35em 40px;
    font-size: 2.5rem;
  }
  .sectTit:before,
  .sectTit:after {
    margin: 0 -28px;
  }
  .sectTit:before {
    border-width: 100px 0 100px 100px;
  }
  .sectTit:after {
    border-width: 100px 100px 100px 0;
  }
}

これは私が組んだものではないので、理解するのに少し時間がかかりました(^^;

あと、実際あったデザインに合わせてつくられているので数字はこの限りではないです！

考え方としては、見出しの上に擬似要素でつくった白の三角形を置くことでくり抜かれたようにできます。

わかりやすいように、【overflow: hidden】を消し、三角形に色を付けてみました。

実際の三角形より大きくつくることで、文字の可変にある程度対応できるというわけですね〜(°_°)ナルホド

今回transformを使っているのですが、【transform-origin: 0 0;】を指定しないと三角形は変な位置にいってしまうので注意です。

あと、リボンの装飾の調整(角度とか)はtransform: scaleY;と擬似要素のマージンでできそうです＾＾

では今日はここまで〜〜