cssで画面幅からはみ出したスタイルをスクロールしないようにしたい

###前提・実現したいこと
画像の上に斜めのboxを被せたいのですがそれを実現するにはwidthで120%の値を入れるしか思いつかなく、そこでwidthの指定をそのままで、横スクロールしない方法があれば教えてほしいです

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width,initial-scale=1.0">
6	<link rel="shortcut icon" href="favicon.ico" type="icon/logo.jpg">
7	<link rel="apple-touch-icon" href="icon/logo.jpg">
8	<link rel="stylesheet" href="css/style.css">
9	<link rel="stylesheet" href="css/normalize.css">
10	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
11	<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
12	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
13	<script type="text/javascript" src="slick/slick.min.js"></script>
14	<title>農業サポートセンター</title>
15</head>
16<body>
17<div class="mainVisual">
18		<div class="mainVisual__slide">
19			<ul class="mainVisual__slide--item">
20				<li><img src="img/slide1.jpg"><p class="img1">文化と確信を融合させた｢農｣の形</p></li>
21			    <li><img src="img/slide2.jpg"><p class="img2">半世紀先まで続く｢農｣をつくり出す</p></li>
22			    <li><img src="img/slide3.jpg"><p class="img3">文化と確信を融合させた｢農｣の形</p></li>
23			</ul>
24		</div>
25		<div class="slanting">
26			<a href=""><div class="triangle"></div></a>
27		</div>
28	</div>
29</body>

css
1.mainVisual__slide--item img {
2    width: 100%;
3    height: 100vh;
4}
5
6.slanting:before {
7	overflow: hidden;
8  content: '';
9  position: absolute;
10  top: 100%;
11  width: 120%;
12  height: 260px;
13  margin: 3% -10% 0;
14  background: #fff;
15  -webkit-transform-origin: left center;
16  -ms-transform-origin: left center;
17  transform-origin: left center;
18  -webkit-transform: rotate(-7deg);
19  -ms-transform: rotate(-7deg);
20  transform: rotate(-7deg);
21  z-index: 100;
22}
23.triangle {
24	width: 0;
25	height: 0;
26	border: 20px solid transparent;
27	border-top: 20px solid #127749;
28	position: absolute;
29	top: 93%;
30	left: 47%;
31  	right: 0;
32  	bottom: 0;
33  	z-index: 200;
34}
35.subContants__wrap {
36	position: absolute;
37}

行動規範の内容に同意します

回答1件

ベストアンサー

提示のCSSが少ないので勘で回答します。

CSS
1.slanting {
2    overflow: hidden;
3}

【overflow - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/overflow

追記：

CSS
1.mainVisual {
2    position: relative;
3    overflow: hidden;
4}
5.slanting{
6    position: absolute;
7    top: 50vh;
8    width: 100%;
9}
10```**動くサンプル：**[https://jsfiddle.net/xw3m20dj/](https://jsfiddle.net/xw3m20dj/)

投稿2017/08/08 14:40

編集2017/08/08 14:56

kei344

総合スコア69625

ryuji000

2017/08/08 14:43

すみません試してみたのですがダメ出した、情報が少なかったので追加しました。

kei344

2017/08/08 14:56

overflow: hidden;のつけている位置が根本的に違います。提示のコードは見ましたか？現在されている「斜めのもの」がどのような位置におきたいかによりますが、 position: absolute;の起点になる外側の要素（position: relative;をつけている要素）がそもそも必要です。後で追記します。

ryuji000

2017/08/08 15:05

詳しい説明ありがとうございます。とても助かりました。また何かありましたらよろしくお願いします。

行動規範の内容に同意します