円を作る方法は、異なる色の特定のdivにのみ表示されますか？

Question

基本的に私はこれを単純にしておきます。

私は（私が述べる何を除き、任意のデザイン面を無視する）このような何かをしようとしています

：

私はJSFiddle here.

.header-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 
.header { 
 
    background-color: #0091cc; 
 
    border-radius: 20px; 
 
    height: 100px; 
 
    width: 90%; 
 
    margin-bottom: 20px; 
 
} 
 
.circle { 
 
    background-color: pink; 
 
    height: 400px; 
 
    width: 400px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -100px; 
 
    left: -100px; 
 
}

<div class="header-wrapper"> 
 
    <div class="header"></div> 
 
    <div class="header"></div> 
 
</div> 
 

 
<div class="circle"></div>

でこれを開始しました

基本的に問題は私がそれをtにすることはできません帽子は2つの矩形を結んでいて、画像のように2つの異なる色を持っています。残りの円を切り取っている間に、それは長方形から溢れる。

これは意味があると思います。

ありがとうございます。

Answer 1

マークアップを変更する必要がありました。古いマークを動作させるためには、あまりにもハッキリだったでしょう。基本的には、各ヘッダーに円を割り当て、オーバーフローをヘッダーに隠すように設定しました。次に、私はトッププロパティで遊んで、円のどの部分を表示するかを決めます。左の国境には少し青色が浮かんでいますが、なぜそれを理解するのに時間がかかりません。

.header-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 
.header { 
 
    background-color: #0091cc; 
 
    border-radius: 20px; 
 
    height: 100px; 
 
    width: 90%; 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    top: -100px; 
 
    left: -100px; 
 
    height: 200px; 
 
    width: 200px; 
 
    border-radius: 200px; 
 
    background-color: #fff; 
 
} 
 

 
.circle.top { 
 
    top: 0; 
 
} 
 

 
.yellow { 
 
    background-color: yellow; 
 
} 
 

 
.pink { 
 
    background-color: pink; 
 
}

<div class="header-wrapper"> 
 
    <div class="header"> 
 
    <div class="circle top pink"></div> 
 
    </div> 
 
    <div class="header"> 
 
    <div class="circle yellow"></div> 
 
    </div> 
 
</div>

Answer 2

あなたが実際よりも少ないHTML markeupでこれを行うと、円を作成するために::beforeまたは::after擬似要素を使用することができます。https://developer.mozilla.org/en-US/docs/Web/CSS/::after

これは、サークルの子要素を作成しますヘッダーのoverflow:hiddenを設定すると、表示したくないサークルの部分が隠されます。

.header-wrapper { 
 
    align-items: flex-end; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.header { 
 
    background-color: #0091cc; 
 
    border-radius: 20px; 
 
    height: 100px; 
 
    margin-bottom: 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 90%; 
 
} 
 

 
.header::after { 
 
    border-radius: 50%; 
 
    content: ""; 
 
    height: 400px; 
 
    left: -100px; 
 
    position: absolute; 
 
    width: 400px; 
 
} 
 

 
.header:nth-child(1)::after { 
 
    background-color: pink; 
 
    top: -100px; 
 
} 
 

 
.header:nth-child(2)::after { 
 
    background-color: orange; 
 
    bottom: -100px; 
 
}

<div class="header-wrapper"> 
 
    <div class="header"></div> 
 
    <div class="header"></div> 
 
</div>

https://jsfiddle.net/od62shsp/4/