HTMLとCSSを使用してイメージを再作成するには？

Question

HTMLとCSSを使用してイメージモックアップを再作成するにはどうすればよいですか？

rctangular divの最後でどのようにカーブを達成できますか？

矩形のdivと円のdivの間に小さな透明な領域を挿入するにはどうすればいいですか？透明なギャップは、外側のラッパーdivから任意のカラー/イメージを継承する必要があります。置いた？

円のdivの外側に透明な円を配置しようとしましたが、外側のラッパーから色を継承しませんでしたが、その背景色が透明のに設定されている場合、矩形divの色を継承します。

EDIT：混乱を避けるため、これを参考にしてください。これが私が達成しようとしていることです。

.wrapper{ 
 
    position: relative; 
 
} 
 
.rectangle{ 
 
    width: 70%; 
 
    height: 50px; 
 
    background: black; 
 
    margin-bottom: 20px; 
 
} 
 
.circle{ 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    border: 2px solid; 
 
    top: -5px; 
 
    right: 0; 
 
    z-index: 999; 
 
    background: white; 
 
}

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

Answer 1

あなたのニーズに合うように、矩形の最後に形を試してみて、作るためにradial gradientで遊ぶことができます。私は、どこ長方形のdivと円形divの間の小さな透明領域を挿入する方法

.container { 
 
    position: relative; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 10%; 
 
    float: right; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 100px; 
 
    background-color: #000000; 
 
} 
 

 
.rectangle { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 100px; 
 
    top: 20px; 
 
    height: 40px; 
 
    background: radial-gradient(circle at 100% calc(100% + 35px), rgba(0,0,0,0) 110px, #000000 0); 
 
}

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

More information about radial gradients

Answer 2

：

は、これは一例として、私の努力であります透明な隙間は、外側のラッパーdivから任意のカラー/イメージを継承し、矩形のdivからは継承しないでください。置いた？

あなたは本当にいくつかの透明な領域をしたい場合は、あなたが最初にその地域で何を描くべきではありません.wrapperにいくつかの色を設定し、キーワードcurrentColor
と背景色として子孫にそれを使用することができます場所。 CSSのために形状が複雑すぎる場合は、SVGで行うのが簡単です。

MDN on currentColor
A few use cases（線形勾配:(とIEの用心）

注：z-index: 1は結構です、あなたが998でそれを求めている場合を除いて999または1000000§§§なし理由：。

O

.wrapper{ 
 
    position: relative; 
 
    color: white; /* reference */ 
 
} 
 
.rectangle{ 
 
    width: 70%; 
 
    height: 50px; 
 
    background: black; 
 
    margin-bottom: 20px; 
 
} 
 
.circle{ 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    border: 10px solid currentColor; /* used here */ 
 
    top: -5px; 
 
    right: 0; 
 
    z-index: 1; 
 
    background: black; 
 
}

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