2017-03-10 11 views
0

div/panelの右端に円弧を描こうとしていますが、それを行う方法があれば教えてください。 mockupのスナップショットが添付されています。 enter image description hereCSSの弧の境界

+0

それはあなたがこれを実現する方法、ページレイアウトの残りの部分に大きく依存します。 – Jhecht

+0

cssで辺を曲げることはできません(角を丸めることしかできません)。 SVG、部分的に透明な背景画像またはキャンバスが必要です。 – Psi

+1

おそらく重複している:http://stackoverflow.com/questions/16470412/how-to-make-arc-shapes-with-css3 – mm759

答えて

0

この効果は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>