`border-left` বা `border-right` প্রোপার্টি ব্যবহার করে সহজে ভার্টিক্যাল লাইন তৈরি করা যায়।
উদাহরণ: ভার্টিক্যাল লাইন
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vLine { border-left: 6px solid rgb(128, 0, 128); height: 500px; margin-left: 5%; }
</style>
</head>
<body>
<h1>ভার্টিক্যাল লাইন উদাহরণ</h1>
<div class="vLine"></div>
</body>
</html>
কোড ব্যাখ্যা
- border-left: 6px solid rgb(128, 0, 128): বামে ৬px বেগুনি রঙের সলিড লাইন।
- height: 500px: লাইনের দৈর্ঘ্য।
- margin-left: 5%; বাম থেকে ৫% অফসেট।
বিকল্প পদ্ধতি
- pseudo-element: `::before { content: ""; width: 2px; height: 100%; background: purple; position: absolute; }`
- CSS Grid/Flex gap: কলামের মাঝে গ্যাপ হিসেবে লাইন।
- transform: rotate(90deg): হরিজন্টাল লাইন ঘুরিয়ে ভার্টিক্যাল করা।
