CSSによる見切れレイアウト

実現したいこと

上図のようなレイアウトをCSSにて作成しようとしています。widthが150%程の円が左右見切れているようなレイアウトになります。

問題

見た目上は「width/transform」あたりを使用して作成できたのですが、width分右にスクロールできてしまいます。overflow: hiddenではみ出ている部分を隠せばうまくいくかとも思ったのですが、うまく行きませんでした。上記のレイアウトを維持しつつ、スクロールできないようにするにはどのようなCSSを設定すればよろしいでしょうか？ご教授頂けると幸いです。
※画像ではなく、CSSにて実現したいと考えています。

以下、現ソース

body {
  background-color: rgba(40, 56, 94, 1);
}
.radius {
  background-color: rgba(157, 177, 202, 0.37);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: auto;
  height: 70%;
  border-radius: 50%;
  width: 160%;
  transform: translateX(-19%);
}

kei344

2019/04/14 16:36

HTMLと試したCSS（overflowとか）も提示してください。

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

回答2件

ベストアンサー

親要素に対して相対位置指定を行った上で、overflowプロパティやheightプロパティなどを指定することで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML
1<body>
2  <div class="radius"></div>
3</body>

CSS
1body {
2  position: relative; /* 追記 */
3  overflow: hidden; /* 追記 */
4  height: 100vh; /* 追記 */
5  margin: 0; /* 追記 */
6  background-color: rgba(40, 56, 94, 1);
7}
8
9.radius {
10  background-color: rgba(157, 177, 202, 0.37);
11  top: 0;
12  bottom: 0;
13  left: 0;
14  right: 0;
15  position: absolute;
16  margin: auto;
17  height: 70%;
18  border-radius: 50%;
19  width: 160%;
20  transform: translateX(-19%);
21}

追記

もし、マウスのミドルボタンを押下したときにスクロール出来る現象を抑制したいのであれば、以下のように HTML, CSS を変更する(動作確認用リンク)か、

HTML
1<body>
2  <div class="wrapper">
3    <div class="radius"></div>
4  </div>
5</body>

CSS
1body {
2  /* 追記ここから */
3  position: relative;
4  height: 100vh;
5  margin: 0;
6  /* 追記ここまで */
7  background-color: rgba(40, 56, 94, 1);
8}
9
10.wrapper { /* 追記ここから */
11  position: absolute;
12  width: 100%;
13  height: 100%;
14  overflow: hidden;
15} /* 追記ここまで */
16
17.radius {
18  background-color: rgba(157, 177, 202, 0.37);
19  top: 0;
20  bottom: 0;
21  left: 0;
22  right: 0;
23  position: absolute;
24  margin: auto;
25  height: 70%;
26  border-radius: 50%;
27  width: 160%;
28  transform: translateX(-19%);
29}

background-imageプロパティとradial-gradient関数を使用する(動作確認用リンク)と良いと思います。

HTML
1<body></body>

CSS
1body {
2  height: 100vh;
3  margin: 0;
4  background: rgba(40, 56, 94, 1)
5    radial-gradient(
6      160vw 70vh,
7      rgba(157, 177, 202, 0.37) 50%,
8      rgba(40, 56, 94, 1) 50.3%
9    ) no-repeat;
10}

投稿2019/04/15 01:46

編集2019/04/15 03:55

s8_chu

総合スコア14731

kura_4869

2019/04/15 14:35

ご回答頂き有難うございます。無事、希望通りの実装をすることが出来ました。ポイントは.radiusのposition: absoluteでした。今回ご回答頂いたお二方の実装どちらでも実現できましたが、より詳しい補足情報を頂いたs8_chuさんにベストアンサーを付けさせていただきました。ありがとうございました。

s8_chu

2019/04/15 17:04

問題が解決したのであれば、質問を解決済みにしていただけませんか？

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

CSS
1.radius {
2  /*position: absolute;*/
3  position: fixed;
4}

https://developer.mozilla.org/ja/docs/Web/CSS/position

投稿2019/04/15 02:42

x_x

総合スコア13749

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSによる見切れレイアウト

実現したいこと

問題

追記

関連した質問