私はCSSを持つ要素の上にこれらの側面を達成するために探しています：丸い側面
これは私が持っている最も近い（ボーダーが必要です）：
div {
width: 120px;
height: 100px;
margin: 25px auto;
border: 1px solid #000;
border-top-left-radius: 200px 300%;
border-bottom-left-radius: 200px 300%;
border-top-right-radius: 200px 300%;
border-bottom-right-radius: 200px 300%;
}<div></div>エッジをシャープにする方法の提案はありますか？幅は可変である必要があります。
あなたは、このような擬似要素であることを行うことができ、そしてそれはどのような今までにあなたがメインの要素に設定されたサイズ
typ2を更新すると、曲がった右/左に等しい半径を有するに拡張します色、イメージ、または動的にスケーラブルな高さで塗りつぶしたい場合は、余分な内部要素が必要です。
.typ1 div {
position: relative;
display: inline-block;
width: 120px;
height: 100px;
margin: 0 30px;
overflow: hidden;
}
.typ1 div + div {
width: 200px;
height: 100px;
}
.typ1 div::before,
.typ1 div::after {
left: 0;
top: -10%;
width: 100%;
height: 120%;
border-radius: 100%;
border: 1px solid #000;
}
.typ1 div::after {
left: 22%;
top: 0;
width: 56%;
height: 100%;
border-radius: 0;
border-width: 1px 0;
}
.typ2 div {
position: relative;
display: inline-block;
width: 74px;
height: 100px;
margin: 5px 52px;
border: 1px solid #000;
border-width: 1px 0;
}
.typ2 div + div {
width: 156px;
}
.typ2 div::before,
.typ2 div::after {
left: -24px;
top: -25%;
width: 188px;
height: 150%;
border-radius: 100%;
border: 1px solid transparent;
border-left: 1px solid #000;
}
.typ2 div::after {
left: auto;
right: -24px;
border-left: none;
border-right: 1px solid #000;
}
/* general styling */
div::before, div::after {
content: '';
position: absolute;
box-sizing: border-box;
}<div class="typ1">
<div></div>
<div></div>
</div>
<div class="typ2">
<div></div>
<div></div>
</div>図形にしたいサイズがわかっている場合は、ラッパーdivとoverflow：hiddenを使用してこれを解決できます。
私はフレックスボックスを中心にして使用しますが、他の方法でそれを垂直にセンタリングすることもできます。
.wrapper {
display: flex;
align-items: center;
height: 100px;
overflow: hidden;
}
.circle {
width: 120px;
height: 120px;
margin: 25px auto;
background-color: black;
border-radius: 100%;
}<div class="wrapper">
<div class="circle"></div>
</div>あなたはポジショニングと2つの子要素で、このような何かを行うことができます。
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 25px auto;
border-radius: 50%;
background: #000;
}
.circle > .inner-top,
.circle > .inner-bottom {
position: absolute;
left: 0;
width: 100px;
height: 25px;
background: #fff;
}
.circle > .inner-top {
top: -17px;
}
.circle > .inner-bottom {
bottom: -17px;
}<div class="circle">
<div class="inner-top"></div>
<div class="inner-bottom"></div>
</div>topとの値を調整あなたが望むようにinner divの両方のプロパティを作成します。
見直し、私の答えにコメント、そして何かが不明確または欠落している場合は私に知らせてください。もしあなたが一番助けになった答えを受け入れることができれば、それは素晴らしいことかもしれません。 – LGSon