आप HTML5 और CSS3 का उपयोग करके एक वृत्त कैसे बनाते हैं?
क्या पाठ को अंदर रखना भी संभव है?
जवाबों:
आप प्रति सेर नहीं बना सकते। लेकिन आप एक सर्कल के समान कुछ बना सकते हैं।
आपको गोलाकार कोनों (द्वारा 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।
यह एचटीएमएल 5 में काफी संभव है । आपके विकल्प हैं: एंबेडेड एसवीजी और <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>कुछ यूनिकोड सर्कल हैं जिनका आप उपयोग कर सकते हैं:
यहाँ और आकृतियाँ ।
यदि आप चाहते हैं तो आप मंडलियों पर पाठ को ओवरले कर सकते हैं:
आप एक कस्टम फॉन्ट (जैसे यह भी) का उपयोग कर सकते हैं यदि आप इसे अलग-अलग सिस्टम पर एक समान देखने का मौका चाहते हैं क्योंकि सभी कंप्यूटर / ब्राउज़र में समान फोंट स्थापित नहीं हैं।
2015 तक, आप इसे बना सकते हैं और पाठ को सीएसएस ( फिडल ) की 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-एस के बिना , यह IE11, फ़ायरफ़ॉक्स, क्रोम और ओपेरा पर काम करता है, और यह मान्य 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>आप सीमा-त्रिज्या विशेषता का उपयोग करके इसे तत्व-सीमा-त्रिज्या के बराबर सीमा-त्रिज्या दे सकते हैं। उदाहरण के लिए:
<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 एक्सटेंशन का उपयोग करने का कारण जेक और वेबकिट के पूर्व-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>नोट : ब्राउज़र उपसर्गों कर रहे हैं नहीं बॉर्डर-त्रिज्या के लिए अब कोई आवश्यकता
वैकल्पिक रूप से, आप 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>बस स्क्रिप्ट टैग में निम्नलिखित करें:
<!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-->यदि आप अपने CSS लिखने के लिए sass का उपयोग कर रहे हैं तो आप कर सकते हैं:
@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/