cssで作った四角形の上下の配置方法を教えてください。

実現したいこと

cssで四角形を傾けて二つそろえて配置しようと思っていますが、二つ目の図形の上部が切れてしまって、そろえることができません。また、pngで背面透過を施した図形をそろえて配置する方法も併せてお教えください。

現在のソースコード

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

CSS
1.wrapper {
2    position: relative;
3    overflow: hidden;
4    width: 100%;
5    height: 100vh;
6}
7
8.wrapper::before{
9    content: '';
10    position: absolute;
11    top: 24%;
12    left: -10%;
13    width: 120%;
14    height: 300px; /* 高さを指定 */
15    background: #0639A6;
16    transform-origin: left center;
17    transform: rotate(-10deg);
18    z-index: -1;
19}
20
21
22.menu{
23    position: relative;
24    overflow: hidden;
25    width: 100%;
26    height: 100vh;
27}
28
29.menu::before{
30    content: '';
31    position: absolute;
32    top: 0px;
33    left: -10%;
34    width: 120%;
35    height: 300px; /* 高さを指定 */
36    background: #CC191E;
37    transform-origin: left center;
38    transform: rotate(-10deg);
39    padding: 0px 0px 0px 0px;
40    z-index: -1;
41}
42

現在はこのよこのようになっております。
※実際のスクリーンショットではないので、サイズ、色は実際のものとは異なります。

最終的には、以下のように図形をそろえたうえで、
背面透過を施したPNG画像をぴったり重ねて配置（アスペクト比は維持しない）しようと思っております。

わかる方いらっしゃいましたら、お教えください。

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

回答1件

ベストアンサー

こんにちは。

overflow: hiddenを消すとどうなりますか？

css
1.menu{
2    position: relative;
3    /* overflow: hidden; 削除 */
4    width: 100%;
5    height: 100vh;
6}

投稿2021/02/15 02:57

Lhankor_Mhy

総合スコア36960

takio-

2021/02/15 07:19

できました！ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

cssで作った四角形の上下の配置方法を教えてください。

実現したいこと

現在のソースコード

関連した質問