Bagaimana cara menggambar lingkaran di halaman html?

Jawaban:

187

Anda tidak bisa menggambar lingkaran saja. Tapi Anda bisa membuat sesuatu yang identik dengan lingkaran.

Anda harus membuat persegi panjang dengan sudut membulat (melalui border-radius) yang merupakan setengah dari lebar / tinggi lingkaran yang ingin Anda buat.

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

ryanoshea
sumber
6
Setelah dipikir-pikir, Anda mungkin ingin tetap & nbsp; di dalam <div> itu untuk memastikannya ditampilkan. Jika tidak, browser mungkin mengabaikannya.
ryanoshea
14
Saya pikir jawaban ini salah karena dikatakan Anda tidak dapat menggambar lingkaran di HTML5. Kanvas adalah elemen HTML5 dan Anda BISA menggambar lingkaran di HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj
19
gunakan -webkit-border-radius: 100%; -moz-border-radius: 100%; radius batas: 100%; Dengan cara ini Anda hanya perlu menyesuaikan lebar dan tinggi untuk menerapkan perubahan Anda di masa mendatang
Arkady
3
Anda harus menambahkan perbatasan untuk membuatnya terlihat.
hakan
4
Saya menemukan menggunakan border-radius: 50%;bekerja dengan baik, mengubah ukuran sesuai keinginan. Untuk warna Anda bisa menggunakan background-coloratau border.
Grimeh
76

Ini sangat mungkin dalam HTML 5 . Pilihan Anda adalah: SVG tertanam dan <canvas>tag .

Untuk menggambar lingkaran di SVG tersemat: 

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

Lingkaran di <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>
Luaskan cuplikan

jkj
sumber
53

Ada beberapa lingkaran unicode yang dapat Anda gunakan:

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

Lebih banyak bentuk di sini .

Anda dapat menghamparkan teks pada lingkaran jika Anda ingin:

Tampilkan cuplikan kode

Anda juga dapat menggunakan font khusus (seperti ini ) jika Anda ingin memiliki kesempatan lebih tinggi untuk terlihat sama pada sistem yang berbeda karena tidak semua komputer / browser menginstal font yang sama.

Alex - GlassEditor.com
sumber
19

border-radius:50% jika Anda ingin lingkaran menyesuaikan dengan dimensi apa pun yang didapat wadah (misalnya jika teks memiliki panjang variabel)

Jangan lupa awalan -moz-dan -webkit-!

Lea Verou
sumber
1
Anda harus memastikan lebar dan tinggi sama, jika tidak maka akan membuat oval.
Hp93
9

Mulai tahun 2015, Anda dapat membuatnya dan memusatkan teks hanya dengan 15 baris 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>
Luaskan cuplikan

Tanpa -webkit-s, ini berfungsi di IE11, Firefox, Chrome dan Opera, dan ini adalah HTML5 (eksperimental) dan CSS3 yang valid.

Sama di MS Edge (2020).

MattAllegro
sumber
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>
Luaskan cuplikan

Cerah
sumber
4

Anda dapat menggunakan atribut border-radius untuk memberikan border-radius yang setara dengan border-radius element. Sebagai contoh:

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

(Alasan menggunakan ekstensi -moz dan -webkit adalah untuk mendukung Gecko dan Webkit versi pra-CSS3-final.)

Ada lebih banyak contoh di halaman ini . Sejauh memasukkan teks, Anda dapat melakukannya tetapi Anda harus memperhatikan posisinya, karena sebagian besar model padding kotak browser masih menggunakan kotak luar.

halus
sumber
4

Secara teknis tidak ada cara menggambar lingkaran dengan HTML (tidak ada <circle>tag HTML), tetapi lingkaran bisa digambar.

Cara terbaik untuk menggambarnya adalah dengan menambahkan border-radius: 50%ke tag seperti div. Berikut contohnya:

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

border-radius: 50%;akan mengubah semua elemen menjadi lingkaran, berapa pun ukurannya. Setidaknya, selama height dan width dari targetnya sama, jika tidak maka akan berubah menjadi oval .

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

Catatan : prefiks browser tidak diperlukan lagi untuk radius-batas

Alternatifnya, Anda juga dapat menggunakan clip-path: circle();untuk mengubah elemen menjadi lingkaran. Bahkan jika elemen memiliki lebih besar widthdari height(atau sebaliknya), itu akan tetap menjadi lingkaran, dan bukan oval.

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

Catatan : jalur klip belum (belum) didukung oleh semua browser

Anda dapat menempatkan teks di dalam lingkaran, cukup dengan menulis teks di dalam tag target,
seperti:

<div>text</div>

Jika Anda ingin memusatkan teks di lingkaran, Anda dapat melakukan hal berikut:

#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>
Luaskan cuplikan

Orang itu
sumber
1
Terima kasih telah menyebutkan jalur klip!
umbe1987
3

Anda dapat menggunakan properti border-radius, atau membuat div dengan tinggi dan lebar tetap dan background dengan lingkaran png.

Bardt
sumber
2

Cukup lakukan hal berikut di tag skrip:

<!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>
Luaskan cuplikan

Dan begitulah Anda mendapatkan lingkaran Anda.

Dan
sumber
Bahasa apa ini seharusnya? OP bertanya tentang HTML5 dan CSS3.
Claus Wilke
Ini dapat dilakukan dalam html menggunakan tag skrip yang menurut saya saya sebutkan di baris pertama @ClausWilke
Dan
Berikan contoh lengkap yang menunjukkan bagaimana Anda menggunakan ini di dalam dokumen HTML. Lihat jawaban ini untuk contoh seperti apa contoh lengkapnya.
Claus Wilke
Saya pikir itu akan membantu apa yang tidak dapat Anda pahami jika Anda mau, saya dapat menambahkan gambar hasil seperti apa lingkaran itu. . .
Dan
Tidak perlu. Saya memasukkannya ke dalam potongan kode. Ini berjalan saat Anda mengklik tombol.
Claus Wilke
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>
    Luaskan cuplikan

Mukhtar
sumber
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;
}
shashi kumar
sumber
1 
   <head>
       <style>

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

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

sederhana dan pemula :)


sumber
0 

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

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

      <span>40%</span>

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

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

shashi kumar
sumber
3
Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan akan secara signifikan meningkatkan nilai jangka panjangnya. Harap edit jawaban Anda untuk menambahkan penjelasan.
Toby Speight
0

Jika Anda menggunakan sass untuk menulis CSS, Anda dapat melakukan:

@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;
}

Output mana:

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

Coba di sini: https://www.sassmeister.com/

Rimian
sumber