CSS `width`, `height`, `border-radius` ব্যবহার করে বর্গ, আয়ত, বৃত্ত এবং আরও জটিল আকার তৈরি করা যায়।
উদাহরণ: বেসিক শেপস
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
div { display: inline-block; margin: 20px; }
.square { width: 100px; height: 100px; background: rgb(23, 153, 121); border: 3px solid darkblue; }
.rectangle { width: 200px; height: 100px; background: rgb(255, 232, 21); border: 3px solid rgb(42, 0, 70); }
.circle { width: 100px; height: 100px; background: rgb(0, 255, 13); border: 3px solid rgb(27, 0, 78); border-radius: 50%; }
</style>
</head>
<body>
<h1>CSS-এ বিভিন্ন আকার উদাহরণ</h1>
<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
</body>
</html>
কোড ব্যাখ্যা
- .square: সমান প্রস্থ ও উচ্চতা + বর্ডার।
- .rectangle: প্রস্থ দুগুণ উচ্চতা।
- .circle: `border-radius: 50%` দিয়ে বৃত্ত আকার।
উন্নত আকার
`clip-path`, `transform`, `::before/::after` ব্যবহার করে ত্রিভুজ, স্টার, হার্ট, পেন্টাগন ইত্যাদি তৈরি করা যায়।
