台形デザインの見出しを装飾する方法

こんにちは。

今日は「台形デザインの見出しを装飾する方法」について書こうと思います！

イメージとしては、キャッチ画像の通りです。

ちょっとお洒落ですよね＾＾

初見はこれどうやってするんや・・・と全然想像もつかなかったのですが考え方は意外とシンプルでした！

ではさっそくコーディングについて見ていきましょー！

コーディング
1. HTML編
2. CSS編

コーディング

HTML編

     <div class="titBlock">
        <div class="bg"></div>
        <h2 class="sectTit">タイトル</h2>
      </div>

bgクラスが装飾部分です。

CSS編

.titBlock {
  position: relative;
  width: 300px;
  padding: 10px 15px;
}

.titBlock .bg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;//重要！
  width: 100%;//領域は親要素いっぱい
  height: 100%;//領域は親要素いっぱい
}

.titBlock .bg:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  left: 0%;
  top: 0%;
  transform: skewX(-14deg);//変形させる
  transform-origin: 100% 0;//どうやらこの指定がないとうまくいかない
  background: #b4fae1;
}

.titBlock .sectTit {
  position: relative;
  font-size: 30px;
  z-index: 1;//重なりを一番上にするため
}

ちょっと量が多いのですが、こんな感じです。

基本的な原理は擬似要素で平行四辺形を作り（skew）、その親要素に【overflow:hidden;】を指定することによりはみ出した部分を消すというものです。

ちなみに【overflow:hidden;】を消すとこんな感じになります。