CSSで矢印背景の作りかた

こんにちは。今日は「CSSで矢印背景の作りかた」について書こうと思います。
ここのところ矢印が多めですが難しいのでメモしたい欲が強いんですよね笑

さてさて、デザインはこんな感じです↓

毎度お馴染み擬似要素で作るのですが簡単に構造を説明すると、下の影のような三角形の上に白色の三角形を重ねて作ります！

2つの三角形は角度が違うので、transformプロパティで調整する必要があるのですがそこらへんさっそくコーディングを見ていきましょう〜！

コード
1. HTML編
2. CSS編

コード

HTML編

        <div class="bgWrap">
          <div class="bgWrapInner">
            <div class="bgArrow"></div>
            <section class="contSect">
              <div class="sectTit">タイトル</div>
              <div class="sectMain">
                <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
              </div>
            </section>
            <!-- ./contSect -->
          </div>
        </div>

今回触る部分はbgWrap、bgWrapInner、bgArrowだけなのですが、実際はその中にコンテンツが入ってくるのでとりあえずダミーで入れています。

CSS編

.bgWrap
{
  position: relative;
  &:before{
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    z-index: -1;
    content: '';
    background-color: #ffebf5;
    display: block;
    transform: translateX(-50%);
  } //ピンク背景
}
.bgWrapInner
{
  position: relative;
  z-index: 1;
  overflow: hidden; //領域からはみ出した分を見えなくする
}
.bgArrow
{
  position: absolute;
  top: 0;
  left: 50%;
  &:before,
  &:after
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
  }
  &:before{
    transform:translate(-50% ,-50%) scaleY(.8) rotate(45deg); //scaleで角度調整
    background-color: #ccbcc4;
  }
  &:after{
    transform:translate(-50% ,-50%) scaleY(.65) rotate(45deg); //scaleで角度調整
    background-color: #fff;
  }
}


@include mq-pc
{
  .bgWrap
  {
  }
  .bgWrapInner
  {
    padding: 55px 0 80px;
  }
  .bgArrow
  {
    width: 80px;
    height: 80px;
  }
}

sassの方がまとまって見やすいと思うのでこれで失礼しますm(_ _)m

【bgArrow】の擬似要素で矢印を作り、はみ出した部分を【bgWrapInner】にoverflow: hidden;を指定することで見えなくします。

ちなみにoverflow: hidden;を消すと何をしているかわかりやすいかと思います。