☰

画像を使用するよりも円形のdivを作成する方が簡単ですか? 質問する

tag-icon • tag-icon html css geometry css-shapes
画像を使用するよりも円形のdivを作成する方が簡単ですか? 質問する

今やっている方法よりも簡単に円形の div を作成する方法はあるのだろうかと思っています。

現在はサイズごとに画像を作っているだけですが、これって面倒ですよね。

CSS を使用して円形の div を作成し、半径を指定することはできますか?

ベストアンサー1

デモはこちらです:http://jsfiddle.net/thirtydot/JJytE/1170/

CS: ...

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

これを機能させるにはIE8以前ダウンロードして使用する必要がありますCSS3 パイ上記のデモは IE8 では動作しませんが、これは jsFiddle が をホストしていないためですPIE.htc。

私のデモは次のようになります:

おすすめ記事