ボーダー半径は日食を生成し、90度の丸いコーナーが必要です。 CSS

Question

私は長方形（幅96.6％、高さ6.5％）に90度の角を得ようとしています

矩形の適用される設定：境界半径 - 左下：5％; ボーダー半径 - 右下：5％;）、これは日食の形を与えますが、90度のコーナーにする必要があります。

これを取得するにはどのような設定が必要ですか？

Answer 1

お客様のborder-radiusにはなど、絶対測定基準を使用する必要があります。 px,またはinで、%でないことを確認するには、そのxとyの値はqualです。それ以外の場合は、widthとheightの値に依存し、要素が正方形でない限り、省略記号が表示されます。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.rectangle { 
 
    width: 96.6%; 
 
    height: 6.5%; 
 
    background: green; 
 
    border-radius: 10px; 
 
}

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

読むthis nice article on CSS-Tricksについてborder-radius。

Answer 2

まず、cssでborder-radiusを使用し、それがpx、emなどにあるかどうかにかかわらず、ハード の番号で使用する必要があります。

後で同じ問題が発生する場合は、境界線の半径をオブジェクト内のパディングのレベルに対して高くしすぎている可能性があります。このサイズのオブジェクトを保持したい場合は、半径を5ピクセルに下げることをお勧めします。それ以外の場合は、オブジェクト内のパディングを増やします。