変形させた擬似要素が右にはみ出てしまいます。

Question

質問ページで画像の挿入できない為、文章のみでお話しします。
申し訳ありません。

全体を囲んでいる「p-service」クラスに対して背景色を指定し「position:relative」を記述し、
擬似要素で「transform: skewX(-45deg)」と記述し背景を白にしたものを実装したのですが、「right:0」の状態で変形させると画面の右側にはみ出てしまいます。

bodyに対して「overflow:hidden」を試しに記述してみましたが、他にデザイン上はみ出してるものがあり見えなくなってしまいます。

右側だけはみ出した擬似要素を非表示にすることはできないでしょうか？
ご教授いただければと思います。

  <section class="p-service l-section">
    <div class="p-service_container">
      <div class="p-service_img">
        <img src="../img/common/image-services.jpg" alt="事業内容">
      </div>
      <div class="p-service_cont">
        <h2 class="c-title_sub">SERVICES<span>事業内容</span></h2>
        <p class="p-service_cont_subtitle">人々の生活基盤を<br>世界最高峰の技術で支える</p>
        <p class="p-service_cont_text">
          私達のモットーは、 「社会基盤から世界をより良くする」こと。<br>
          そのために最前線で国家規模のプロフェクトに参画することもあれば、<br>
          世界各国の技術者、研究者と共に次世代の建設機材の研究開発事業も<br>
          同時に行うことで、業界の進化の促進を担っています。
        </p>
        <a href="" class="c-button">事業内容を更に知る</a>
      </div>
    </div>
  </section>

.p-service {
  background:global.$gray;
  height: 430px;
  position: relative;
  z-index: 10;
  &::before {
    //背景に変形させた白背景
    content:'';
    display: block;
    position: absolute;
    top:0;
    right:0;
    height: 100%;
    width: 360px;
    background: global.$white;
    transform: skewX(-45deg);
    z-index: -1;
  }
}


.p-service_container {
  display: flex;
  padding-top: 40px;
}

.p-service_img {
  img {

  }
}

.p-service_cont {
  margin-left: 48px;
  &_subtitle {
    margin-top: 20px;
    @include global.fz(32,24);
    @include global.lh(1.3);
  }

  &_text {
    margin-top: 30px;
    @include global.fz(16);
    @include global.lh(2);
    letter-spacing: 0.02em;
  }
}

Comments

[recal]

画像2MBまでなら挿入できませんか？
提示されたコードを使うだけで問題を再現出来る事を確認しましたか？(@includeは適用されなくても問題がない？)
前後要素がわからないのですが、clip-path: polygonみたいな変形の仕方だとNGですか？
skewYにしてwidth:100%の形状等。

[kogari]

画像サイズ関係なくブラウザ変えたら挿入できるようになりました。
clip-pathとwidthを調整したら実装できました！
ありがとうございます！

[recal]

おめでとうございます！
自己解決できたら、解決方法を投稿して自己解決を選んでもらえると、
後続の人が助かると思いますのでよろしくおねがいします。

Answer 1

bodyではなく、直近の親の.p-serviceに対して、overflow: hiddenを指定すると良さそうです。

.p-service {
  background:global.$gray;
  height: 430px;
  position: relative;
  z-index: 10;
  overflow: hidden; // 追加
  &::before {
    ....
  }
}