134

HTML5 と CSS3 を使用してどのように円を描画しますか?

中にテキストを入れることも可能ですか？

4

19 に答える 19

204

円自体を描くことはできません。しかし、あなたは円と同じものを作ることができます。

作成する円の幅/高さの半分border-radiusである（を介して）角が丸い長方形を作成する必要があります。

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>

于 2011-08-03T05:00:01.653 に答える
82

HTML 5 ではかなり可能です。オプションは次のとおりです: Embedded SVGおよび<canvas>tag。

埋め込まれた SVG に円を描くには: 

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

丸で囲んで<canvas>ください: 

var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()
<canvas id="circlecanvas" width="100" height="100"></canvas>

于 2011-08-04T04:54:02.183 に答える
53

使用できる Unicode サークルがいくつかあります。

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

その他の形状はこちら.

必要に応じて、円にテキストを重ねることができます。

#container {
    position: relative;
}
#circle {
  font-size: 50px;
  color: #58f;
}
#text {
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;
}
<div id="container">
    <div id="circle">&#x25CF;</div>
    <div id="text">a</div>
</div>

すべてのコンピューター/ブラウザーに同じフォントがインストールされているわけではないため、異なるシステムで同じように見える可能性を高めたい場合は、カスタム フォント (このような) を使用することもできます。

于 2014-12-21T06:51:09.307 に答える
21

border-radius:50%コンテナが取得するサイズに合わせて円を調整する場合（たとえば、テキストが可変長の場合）

-moz-および-webkit-プレフィックスを忘れないでください。（プレフィックスは不要になりました）

div{
  border-radius: 50%;
  display: inline-block;
  background: lightgreen;
}

.a{
  padding: 50px;
}

.b{
  width: 100px;
  height: 100px;
}
<div class='a'></div>
<div class='b'></div>

于 2011-08-03T20:45:48.063 に答える
10

2015 年現在、わずか 15 行の CSS ( Fiddle )でテキストを中央揃えにすることができます。

body {
  background-color: #fff;
}
#circle {
  position: relative;
  background-color: #09f;
  margin: 20px auto;
  width: 400px;
  height: 400px;
  border-radius: 200px;
}
#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>circle with text</title>

</head>

<body>
  <div id="circle">
    <div id="text">Text in the circle</div>
  </div>
</body>

</html>

s がなくても-webkit-、これは IE11、Firefox、Chrome、および Opera で動作し、有効な HTML5 (実験的) および CSS3 です。

MS Edge (2020) でも同じです。

于 2015-07-29T18:13:54.207 に答える
5

border-radius: 50%;サイズに関係なく、すべての要素を円に変えます。少なくとも、ターゲットのとが同じである限り 、それ以外の場合は楕円形になります。height width 

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}
<div id="target"></div>

注: border-radius にブラウザの接頭辞は不要になりました

または、 を使用clip-path: circle();して要素を円に変えることもできます。要素に大widthなりheight(またはその逆) がある場合でも、楕円ではなく円になります。

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}
<div id="target"></div>

注: clip-path は(まだ) すべてのブラウザーでサポートされているわけではありません


次のように、ターゲットのタグの内側にテキストを記述するだけで、円の内側にテキストを配置できます。

<div>text</div>

テキストを円の中央に配置する場合は、次の操作を実行できます。

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;

    display: flex;
    align-items: center;
}

#text{
    width: 100%;
    text-align: center;
}
<div id="target">
    <div id="text">text</div>
</div>

于 2018-05-15T14:28:54.493 に答える
5 

.circle{
    height: 65px;
    width: 65px;
    border-radius: 50%;
    border:1px solid red;
    line-height: 65px;
    text-align: center;
}
<div class="circle"><span>text</span></div>

于 2017-04-27T03:50:07.307 に答える
4

border-radius属性を使用して、要素のborder-radiusと同等のborder-radiusを指定できます。例えば：

<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;">&nbsp;</div>

（-mozおよび-webkit拡張機能を使用する理由は、CSS3より前のバージョンのGeckoおよびWebkitをサポートするためです。）

このページには他にも例があります。テキストの挿入に関しては、それを行うことができますが、ほとんどのブラウザのボックスパディングモデルは依然として外側の正方形を使用しているため、位置に注意する必要があります。

于 2011-08-03T04:59:49.347 に答える
4

HTML で円を描く方法は技術的にありませんが ( <circle>HTML タグはありません)、円を描くことはできます。

を描画する最良の方法はborder-radius: 50%、 などのタグに追加することdivです。次に例を示します。

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
于 2013-10-12T22:18:30.413 に答える
3

border-radius プロパティを使用するか、高さと幅が固定された div と png 円の背景を作成できます。

于 2011-08-03T05:16:17.853 に答える
2 

  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>

于 2016-08-31T14:01:06.267 に答える
1 
.at-counter-box {
    border: 2px solid #1ac6ff;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    font-family: 'Oswald Sans', sans-serif;
    color:#000;
}
.at-counter-box-content {
    position: relative;
}
.at-counter-content span {
    font-size: 40px;
    font-weight: bold ;
    text-align: center;
    position: relative;
    top: 55px;
}
于 2016-05-31T11:14:20.230 に答える
1

これは、CS 1.6 の統計 Web サイトに使用したサークルです。美しい四色の輪。

#circle {
      border-top: 8px ridge #d11967;
      border-right: 8px ridge #d32997;
      border-bottom: 8px ridge #5246eb;
      border-left: 8px ridge #fc2938;
      border-radius: 50%; width: 440px; height: 440px;
}
<div id="circle"></div>
幅と高さを変更して、円の直径を調整します。

また、skewY()、skewX()、rotate() を使用して回転および傾斜させることもできます。

  transform: rotate(60deg);
  transform: skewY(-5deg);
  transform: skewX(-15deg);
于 2020-12-21T00:16:07.367 に答える
0 

<div class="at-counter-box-content">

  <div class="at-counter-content">

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

于 2016-05-31T11:01:58.050 に答える