CSS বর্ডার ট্রিক ব্যবহার করে ছবি ছাড়া তীর (অ্যারো) তৈরি করা যায়। একটি এলিমেন্টের দুটি সংলগ্ন বর্ডার রঙিন এবং বাকি দুটি ট্রান্সপেরেন্ট রাখলে তীর তৈরি হয়।
উদাহরণ: CSS অ্যারো
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
i {
border: solid rgb(62, 19, 182);
border-width: 0 6px 6px 0;
display: inline-block; padding: 3px;
}
p { font-size: 18px; font-weight: 500; }
.rightArrow { transform: rotate(-45deg); }
.leftArrow { transform: rotate(135deg); }
.upArrow { transform: rotate(-135deg); }
.downArrow { transform: rotate(45deg); }
</style>
</head>
<body>
<h2>CSS অ্যারো</h2>
<p>ডান তীর: <i class="rightArrow"></i></p>
<p>বাম তীর: <i class="leftArrow"></i></p>
<p>উপর তীর: <i class="upArrow"></i></p>
<p>নিচে তীর: <i class="downArrow"></i></p>
</body>
</html>
কোড ব্যাখ্যা
- border-width: 0 6px 6px 0: উপরে ০, ডানে ৬px, নিচে ৬px, বামে ০ — এটাই তীরের আকার তৈরি করে।
- transform: rotate(...): ঘুরিয়ে চারদিকের তীর বানানো হয়েছে।
- <i> ট্যাগ: ইনলাইন-ব্লক হিসেবে কাজ করে, আকার ধারণ করে।
বিকল্প
Unicode অ্যারো (`→`, `←`, `↑`, `↓`) বা SVG আইকনও ব্যবহার করা যায়।
