web-dev-qa-db-ja.com

CSSのみを使用して円を描く

ほとんどのブラウザ（IE、Mozilla、Safari）で動作するCSSのみを使用して円を描くことは可能ですか？

htmlcsscss-shapes
112
Hector Barbossa

円のユニコードシンボル（25CF）を含むコンテンツで.beforeを使用できます。

.circle:before {
  content: ' \25CF';
  font-size: 200px;
}
<span class="circle"></span>

IE8以前ではborder-radiusが機能しないため、これをお勧めします（提案が少し精神的なものであるという事実を認識しています）。

135
Tom

はい、ボックスを描画し、ボックスの幅の半分の境界半径を与えます：

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

作業デモ：

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
<div id="circle"></div>
184
Tatu Ulmanen
  • 設定された高さと幅でdivを作成します（したがって、円の場合は同じ高さと幅を使用します）。
  • 50％のborder-radiusを追加すると、形状が円形になります。 （注： 長い時間 ）にはプレフィックスは不要です
  • その後、background-color/gradients /（pseudo elementsでさえ）をいじって、次のようなものを作成できます。
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}
<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>
39
jbutler483

古いIEバージョンに苦労している場合は、HTMLコードを試してください。

&#8226;

cssを使用して色を変更します。出力：

•

12
Sunit

これはすべてのブラウザで動作します

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
10
AeJey

うん..ここに私のコードがあります：

<style>
  .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue
  }
</style>
<div class="circle">
</div>
9
user1999828

はい、border-radius CSSプロパティを使用できます。詳細については http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity をご覧ください

7
shankhan