0
div/panelの右端に円弧を描こうとしていますが、それを行う方法があれば教えてください。 mockupのスナップショットが添付されています。 CSSの弧の境界
div/panelの右端に円弧を描こうとしていますが、それを行う方法があれば教えてください。 mockupのスナップショットが添付されています。 CSSの弧の境界
この効果はCSSで確認できます。以下の例。
.wrap {
position: relative;
width: 100px;
height: 400px;
background-color: pink;
overflow: hidden;
}
.wrap::before {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left:-280px;
background-color: tomato;
}
.wrap::after {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -280px;
margin-left:-290px;
background-color: white;
}
<div class="wrap">
</div>
それはあなたがこれを実現する方法、ページレイアウトの残りの部分に大きく依存します。 – Jhecht
cssで辺を曲げることはできません(角を丸めることしかできません)。 SVG、部分的に透明な背景画像またはキャンバスが必要です。 – Psi
おそらく重複している:http://stackoverflow.com/questions/16470412/how-to-make-arc-shapes-with-css3 – mm759