css3 描画 semicircle_html/css_WEB-ITnose

border-radius 半円を作成する方法は、要素の幅と丸い角の方向が異なる幅と高さの比率、および方向に一致している必要があることを除いて、円の作成方法と同じです。丸い角の上部の半円、下部の半円、左の半円、右の半円の効果を作成できます。例:
.semicircle {
margin 50px 0 0;/* フィレットの半径は高さの値です*/
}
.right {
height: 100px;/* 高さは幅の 2 倍です*/
width: 50px;
border-radius: 0 50px 50px 0;/*角の半径 幅の値*/
}
.bottom {
width: 100px;/*幅は高さの 2 倍です*/
height: 50px; border-radius: 0 0 50px 50px;/*角丸の半径は高さの値*/
}
.left {
width: 50px; */
}

その効果を図 3-35 に示します。



border-radius 半円を作成するには 2 つのヒントがあります:

上半円または下半円を作成するには、要素の幅の値は高さの値の 2 倍であり、フィレット半径の値は要素の高さの値です。要素;

左の半円または右の半円を作成します。要素の高さの値は幅の値の 2 倍で、フィレットの半径の値は要素の幅の値です。