web-dev-qa-db-ja.com

HTMLページに円を描く方法は？

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

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

htmlcsscss3geometrycss-shapes
100
Sergey Metlov

それ自体は円を描くことができません。ただし、円と同じものを作成できます。

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

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

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>
73
jkj

使用できるユニコードサークルがいくつかあります。

* { 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>

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

50
Alex

border-radius:50%円をコンテナのサイズに合わせて調整する場合（例：テキストが可変長の場合）

プレフィックス-moz-および-webkit-を忘れないでください！

18
Lea Verou

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>

-webkit-sがない場合、これはIE11、Firefox、ChromeおよびOpera、Windows7で動作し、有効なHTML5（実験的）およびCSS3です。

7
MattAllegro

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

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

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
4
lachlanjc

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拡張機能を使用する理由は、GeckoおよびWebkitのCSS3最終版以前をサポートするためです。）

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

4
fluffy

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

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

注： ブラウザのプレフィックスはnotはボーダーにもう必要ありません-半径

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

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

実際、clip-pathを使用して 要素をあらゆる種類の形状に変換

注： クリップパスはnot（まだ）すべてのブラウザでサポートされています

ターゲットのタグ内にテキストを書くだけで、円の内側にテキストを配置できます。
そのようです：

<div>text</div>

center円内のテキストにしたい場合は、次のことができます。

#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>
4
Peter Prakker
.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>
3
Sunny

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

3
Bardt

スクリプトタグで次の操作を行うだけです。

<!Doctype html>
<html>
<head>
        <title>Circle Canvas</title>
</head>
<body>
        <canvas id="myCanvas" width="300" height="150" style="border:1px solid 
#d3d3d3;">
        <body>
                <script>
                        var c = document.getElementById("myCanvas");
                        var ctx = c.getContext("2d");
                        ctx.beginPath();
                        ctx.arc(100, 75, 50, 0, 2 * Math.PI);
                        ctx.stroke();
                </script>
    </body>
</body>
</html>

そして、あなたはあなたのサークルを手に入れました。

2
Dan
   <head>
       <style>

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       </style>
   </head>

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

シンプルで初心者:)

1
user2768308
  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>
1
Mukhtar
.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;
}
1
shashi kumar

Sassを使用してCSSを記述している場合、次のことができます。

@mixin draw_circle($radius){
  width: $radius*2;
  height: $radius*2;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-circle {
  @include draw_circle(25px);
  background-color: red;
}

どの出力：

.my-circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background-color: red;
}

ここで試してください： https://www.sassmeister.com/

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

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

      <span>40%</span>

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

</div><!--at-counter-box-content-->
0
shashi kumar