CSSで円形を作るには、border-radiusプロパティを使用します。border-radiusプロパティは、四角形の角を丸めたり、楕円形を作ったりすることができます。
以下は、border-radiusプロパティを使用して円形を作る例です。
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* 半径を50%に設定 */
background-color: red;
}
上記の例では、幅と高さを同じにして、border-radiusプロパティに半径を50%に設定しています。これにより、正確に円形が作成されます。
もし、他の要素に円形を適用したい場合は、その要素に適用したいクラス名を.circleの代わりに使用します。
<div class="circle">This is a circle.</div>
このようにすることで、div要素が円形になります。
border-radius
プロパティには4つの値を指定して、四角形の各角を独立して丸めることもできます。たとえば、以下のように指定すると、左上と右下の角を半径10pxで丸め、左下と右上の角を半径20pxで丸めます。
.circle {
width: 100px;
height: 100px;
border-radius: 10px 20px 10px 20px; /* 左上、右上、右下、左下 */
background-color: red;
}
以上が、CSSで円形を作る方法です。