Bagaimana Anda menggambar lingkaran menggunakan HTML5 dan CSS3?
Apakah mungkin juga untuk meletakkan teks di dalamnya?
Jawaban:
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>border-radius: 50%;bekerja dengan baik, mengubah ukuran sesuai keinginan. Untuk warna Anda bisa menggunakan background-coloratau border.
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>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>Ada beberapa lingkaran unicode yang dapat Anda gunakan:
Lebih banyak bentuk di sini .
Anda dapat menghamparkan teks pada lingkaran jika Anda ingin:
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.
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>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).
.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>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;"> </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.
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>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>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>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>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>Dan begitulah Anda mendapatkan lingkaran Anda.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}<h1> <br>hello world</h1>.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;
} <head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>sederhana dan pemula :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->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/