คุณวาดวงกลมโดยใช้ HTML5 และ CSS3 ได้อย่างไร?
สามารถใส่ข้อความข้างในได้หรือไม่?
คำตอบ:
คุณไม่สามารถวาดวงกลมต่อ se แต่คุณสามารถสร้างสิ่งที่เหมือนกันกับวงกลมได้
คุณต้องสร้างสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมน (ผ่านborder-radius) ซึ่งมีความกว้าง / ความสูงครึ่งหนึ่งของวงกลมที่คุณต้องการสร้าง
#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%;งานได้ดีเปลี่ยนขนาดตามต้องการ สำหรับสีคุณสามารถใช้background-colorหรือborder.
มันค่อนข้างเป็นไปในHTML 5 ตัวเลือกของคุณ: สมองกลฝังตัว SVGและแท็ก<canvas>
ในการวาดวงกลมใน 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>มีวงกลม Unicode สองสามวงที่คุณสามารถใช้ได้:
คุณสามารถวางซ้อนข้อความบนวงกลมได้หากคุณต้องการ:
คุณยังสามารถใช้ฟอนต์ที่กำหนดเองได้ (เช่นแบบนี้ ) หากต้องการมีโอกาสสูงขึ้นที่จะมีลักษณะเหมือนกันในระบบต่างๆเนื่องจากคอมพิวเตอร์ / เบราว์เซอร์บางเครื่องไม่ได้ติดตั้งฟอนต์เดียวกัน
border-radius:50% ถ้าคุณต้องการให้วงกลมปรับขนาดตามที่คอนเทนเนอร์ได้รับ (เช่นถ้าข้อความมีความยาวผันแปรได้)
อย่าลืม-moz-และ-webkit-คำนำหน้า!
ในปี 2015 คุณสามารถสร้างและจัดกึ่งกลางข้อความด้วย CSS ( Fiddle ) เพียง 15 บรรทัด:
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 และเป็น HTML5 (ทดลอง) และ CSS3 ที่ถูกต้อง
เช่นเดียวกันกับ 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>คุณสามารถใช้แอตทริบิวต์ 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;"> </div>(เหตุผลในการใช้ส่วนขยาย -moz และ -webkit คือเพื่อรองรับ Gecko และ Webkit เวอร์ชันก่อน CSS3- สุดท้าย)
มีตัวอย่างเพิ่มเติมในหน้านี้ ในการแทรกข้อความคุณสามารถทำได้ แต่คุณต้องคำนึงถึงตำแหน่งเนื่องจากรูปแบบช่องว่างภายในของเบราว์เซอร์ส่วนใหญ่ยังคงใช้ช่องสี่เหลี่ยมด้านนอก
ไม่มีทางเทคนิคในการวาดวงกลมด้วย HTML (ไม่มี<circle>แท็ก HTML) แต่สามารถวาดวงกลมได้
วิธีที่ดีที่สุดที่จะวาดหนึ่งคือการเพิ่มไปยังแท็กเช่นborder-radius: 50% divนี่คือตัวอย่าง:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>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>หมายเหตุ : คลิปเส้นทางไม่ได้ (ยัง) สนับสนุนโดยเบราว์เซอร์
คุณสามารถวางข้อความไว้ในวงกลมได้เพียงแค่เขียนข้อความลงในแท็กของเป้าหมาย
ดังนี้:
<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>คุณสามารถใช้คุณสมบัติ border-radius หรือสร้าง div ที่มีความสูงและความกว้างคงที่และพื้นหลังด้วยวงกลม png
เพียงทำสิ่งต่อไปนี้ในแท็กสคริปต์:
<!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>และคุณไปที่นั่นคุณมีวงกลมของคุณ
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>ง่ายและมือใหม่ :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->หากคุณใช้ 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/