web-dev-qa-db-ja.com

円形のdivを作成する方法は？

背景色が赤で完全に円形のdivを作成したい

どうやってやるの？

Cssまたはjqueryの両方を使用できます

csscss-shapes
6
Saswat

jqueryとcssを使用して、円を作成できます。 CSSソリューションが他のユーザーによって既に提供されているため、ここでjqueryソリューションを提供しています。 jquery[〜＃〜] demo [〜＃〜]を確認してください。

jQuery Code

$(document).ready(function()
{
  $("div").css("border-radius", "50%");
});

CSSコード

div
{
/*border-radius: 50%;*/
width: 50%;
height: auto;
padding-top: 50%;
background: #ef8913;
}
25
Kheema Pandey

あなたは次のことができます

[〜＃〜] fiddle [〜＃〜]

<div id="circle"></div>

[〜＃〜] css [〜＃〜]

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

その他の形状[〜＃〜] source [〜＃〜]

15
Richa

50％のborder-radiusプロパティを使用します。

たとえば、次のとおりです。

.example-div {

    border-radius: 50%

}
3
Kevin Damstra

50％の境界線半径を使用すると、円を作成できます。以下に例を示します。

CSS：

#exampleCircle{
    width: 500px;
    height: 500px;
    background: red;
    border-radius: 50%;
}

HTML：

<div id = "exampleCircle"></div>
2
Nirvik Baruah

デモ

css

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
}

html

<div></div>
2
4dgaurav

div要素、リンク解除SVG circleプリミティブは、常に長方形です。ただし、丸い角を使用して丸みを帯びさせることができます。たとえば、

div.circle{ border-radius:50px; }
1
dakab
.circle {
    border-radius: 50%;
    width: 500px;
    height: 500px;
    background: red;
}

<div class="circle"></div>

こちらをご覧ください [〜＃〜] fiddle [〜＃〜]

1
bumbumpaw