আপনি কীভাবে এইচটিএমএল 5 এবং সিএসএস 3 ব্যবহার করে একটি বৃত্ত আঁকেন?
ভিতরে পাঠ্য রাখা কি সম্ভব?
উত্তর:
আপনি প্রতি সেচ বৃত্ত আঁকতে পারবেন না। তবে আপনি কোনও বৃত্তের মতো কিছু তৈরি করতে পারেন।
বৃত্তাকার কোণগুলি (মাধ্যমে border-radius) একটি আয়তক্ষেত্র তৈরি করতে হবে যা আপনি তৈরি করতে চান সেই বৃত্তের প্রস্থ / উচ্চতা height
#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 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>কয়েকটি ইউনিকোড চেনাশোনা রয়েছে যা আপনি ব্যবহার করতে পারেন:
এখানে আরও আকার ।
আপনি যদি চান তবে আপনি চেনাশোনাগুলিতে পাঠ্যকে ওভারলে করতে পারেন:
এছাড়াও আপনি (যেমন একটি কাস্টম ফন্ট ব্যবহার করতে পারে এই একটি) আপনি এটা একটি উচ্চ সম্ভাবনা থেকে না সকল কম্পিউটারে / ব্রাউজারে একই ফন্ট ইনস্টল করা আছে বিভিন্ন সিস্টেমে একই খুঁজছেন করাতে চাই।
border-radius:50% যদি আপনি চান যে চেনাশোনাটি ধারকটি যে পরিমাণে সামঞ্জস্য করে তার সাথে সামঞ্জস্য করতে (যেমন পাঠ্যটি পরিবর্তনশীল দৈর্ঘ্যের হয়)
-moz-এবং -webkit-উপসর্গ ভুলবেন না
২০১৫ সালের হিসাবে, আপনি এটি তৈরি করতে এবং সিএসএসের প্রায় 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- এটি আই 11, ফায়ারফক্স, ক্রোম এবং অপেরাতে কাজ করে এবং এটি বৈধ HTML5 (পরীক্ষামূলক) এবং CSS3।
এমএস এজ তে একই (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>(-মোজ এবং ওয়েবেকিট এক্সটেনশানগুলি ব্যবহারের কারণ হ'ল গেকো এবং ওয়েবকিটের প্রাক-সিএসএস 3-চূড়ান্ত সংস্করণ সমর্থন করা))
এই পৃষ্ঠায় আরও উদাহরণ আছে । যতক্ষণ পাঠ্য সন্নিবেশ করা যায়, আপনি এটি করতে পারেন তবে আপনাকে পজিশনিং সম্পর্কে সচেতন থাকতে হবে, কারণ বেশিরভাগ ব্রাউজারের বাক্স প্যাডিং মডেলটি এখনও বাইরের স্কোয়ার ব্যবহার করে।
এইচটিএমএল দিয়ে চেনাশোনা আঁকার প্রযুক্তিগতভাবে কোনও উপায় নেই (একটি নেই <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-->আপনি যদি নিজের সিএসএস লিখতে স্যাস ব্যবহার করছেন তবে আপনি এটি করতে পারেন:
@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/