区切りの曲線を滑らかにしたい

CSS3
1.slide {
2  width: 100%;
3  height: 800px;
4  overflow: hidden;
5  position: relative;
6}
7
8.menu-content {
9  width: 100%;
10  z-index: 11;
11  position: absolute;
12  top: 45px;
13  height: auto;
14  display: flex;
15}
16
17.menu-content img {
18  width: 270px;
19  height: 75px;
20  margin-left: 8%;
21  margin-right: auto;
22  margin-top: 5px;
23}
24
25.menu-content ul {
26  list-style: none;
27  color: #fff;
28  width: 440px;
29  height: 25px;
30  font-size: 14px;
31  display: flex;
32  justify-content: space-between;
33  padding-right: 8%;
34  margin-top: 40px;
35}
36
37.menu-content li:hover {
38  border-bottom: #fff solid 2px;
39}
40
41.slide img {
42  z-index: 10;
43  opacity: 0;
44  width: 100%;
45  height: auto;
46  position: absolute;
47  left: 0;
48  top: 0;
49  animation: anime 40s 0s infinite;
50  border-bottom-left-radius: 50% 6%;
51  border-bottom-right-radius: 50% 6%;
52  margin-left: -200px;
53  margin-right: -200px;
54  padding-left: 200px;
55  padding-right: 200px;
56}
57```
58HTML5

<body> <div class="header-wrapper"> <div class="slide"> <img src="/Users/wakamatsukasumi/Desktop/模写コーディング/img/main_visual_111-0x0.jpg" /> <img src="/Users/wakamatsukasumi/Desktop/模写コーディング/img/main_visual_13-0x0.jpg" /> <img src="/Users/wakamatsukasumi/Desktop/模写コーディング/img/main_visual_7-0x0.jpg" /> <img src="/Users/wakamatsukasumi/Desktop/模写コーディング/img/main_visual_6-0x0.jpg" /> <img src="/Users/wakamatsukasumi/Desktop/模写コーディング/img/main_visual_2-0x0.jpg" /> </div> <div class="menu-content"> <img src="/Users/wakamatsukasumi/Desktop/模写コーディング/img/siteLogo-pc@2x.png" /> <ul> <li>TOP</li> <li>PRODUCT</li> <li>ABOUT</li> <li>NEWS</li> <li>CONTACT</li> </ul> </div> </div> <div class="section1> ``````

↑私が書いたもの

↑理想のもの

コンテンツの区切りをCSSのborder-radiusで曲線にすることはできたのですが両端が丸まりすぎてしまいます。

両端にをネガティブマージン、と相殺するためのpaddingを入れてるのですがうまく効いてくれてないのでしょうか？
よろしくお願いします。

hatena19

2021/10/28 12:35

HTMLのコードも提示してください。あと、提示のCSSには、border-radius がどこにもないですが。状況の再現できるコードを提示してください。

wakamatsu

2021/10/28 20:37

失礼しました。 HTMLファイルを追加しました。 CSSは border-bottom-left-radius: 50% 6%; border-bottom-right-radius: 50% 6%; がCSSファイルの下の方に記述してあります。よろしくお願いします。

hatena19

2021/10/28 23:10

border-bottom-left-radius: 50% 6%; border-bottom-right-radius: 50% 6%; の%の数値を変更してお好みの丸まりに調整すればいいと思いますが。検証ツールで変更すれば、すぐに結果を確認できますので、いろいろ変化させてお好みの値を探せばいいでしょう。

wakamatsu

2021/10/29 12:17

回答ありがとうございます。値を変えて丸みを変えることは理解できるのですが、両端が丸まりすぎている問題を解決したいです。細かいですが、画像を見ていただくと理想のものに比べると私が書いたものは両端に角度がつきすぎています。＊画像追加しました＊調べてみると border-bottom-left-radius: 50% 6%; border-bottom-right-radius: 50% 6%; の後に margin-left: -200px; margin-right: -200px; padding-left: 200px; padding-right: 200px; ネガティブマージンとそれを相殺させるためのパディングを書くと良い、とのことでした。ただ、これらを書いてみても解決には繋がりませんでした。何度も質問してしまう形になり申し訳ありません。よろしくお願いします。

hatena19

2021/10/29 12:37

「ネガティブマージンとそれを相殺させるためのパディング」がどのような効果があるのか分かりません。それを消しても変化がないように思います。調べてみるととのことですが、どこにそのような説明があったのかリンクを提示してもらえませんか。あと、どのような結果が希望なのかよく分からないので、現状の画像と希望の結果を画像で提示できませんか。

wakamatsu

2021/10/29 12:52

https://junpei-sugiyama.com/curve-to-separate/ こちらのブログを参考にしました。画像追加しました。すみません。よろしくお願いします！！

hatena19

2021/10/29 13:02

なるほど、たぶん、やりたいことが分かったと思います。回答しますので、ちょっとまってください。

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

回答1件

ベストアンサー

【CSS】セクションの区切りを曲線にする方法 - じゅんぺいブログ
参考にした上記の方法は、

border-radiusで境界を曲線にしたものをネガティブマージンで画面からはみ出させて、両側を断ち切った状態にしています。

質問のコードでそれがうまくいかないのは、
position: absolute;で絶対配置にしているので、ネガティブマージンではサイズが拡大しないからです。
親のoverflow: hidden;をコメントアウトしてみると画像のサイズは変わっていないことが分かります。

widthで幅を広げて、広がった分だけleftでずらすと両側が断ち切れます。

一例です。
left と width を調整してお好みのものにしてください。

css
1.slide img {
2  z-index: 10;
3  opacity: 0;
4  width: 100%;
5  height: auto;
6  position: absolute;
7  left:-5%;   /* 修正 */
8  width: 110%; /* 追加 */
9  top: 0;
10  animation: anime 40s 0s infinite;
11  border-bottom-left-radius: 50% 6%;
12  border-bottom-right-radius:50% 6%;
13/*  margin-left: -200px;
14  margin-right: -200px;
15  padding-left: 200px;
16  padding-right: 200px; */
17}