জয়েন লগইন

সিএসএস

🌈সিএসএস কি?

📋সিএসএস হলো মার্কার তৈরি করার পদ্ধতি।

⚒️সিএসএস মার্কার তৈরি করতে ব্যবহৃত হয়।

সিএসএস সমূহ

সিএসএস এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ marker - মার্কারের বৈশিষ্ট্য নির্ধারণ করা
  • ➡️ marker-start - শুরুর মার্কার নির্ধারণ করা
  • ➡️ marker-mid - মধ্যবর্তী মার্কার নির্ধারণ করা
  • ➡️ marker-end - শেষ মার্কার নির্ধারণ করা

marker - মার্কারের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 3;
  marker: url(#arrow);
}
</style>
</head>
<body>

<svg width="300" height="120" viewBox="0 0 300 120">

  <defs>
    <marker id="arrow"
      markerWidth="10"
      markerHeight="10"
      refX="5"
      refY="5"
      orient="auto">
      <path d="M0,0 L10,5 L0,10 Z"></path>
    </marker>
  </defs>

  <path d="M30 60 L270 60"></path>

</svg>

</body>
</html>

marker-start - শুরুর মার্কার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 3;
  marker-start: url(#arrow);
}
</style>
</head>
<body>

<svg width="300" height="120">

  <defs>
    <marker id="arrow"
      markerWidth="10"
      markerHeight="10"
      refX="5"
      refY="5"
      orient="auto">
      <path d="M0,0 L10,5 L0,10 Z"></path>
    </marker>
  </defs>

  <path d="M30 60 L270 60"></path>

</svg>

</body>
</html>

marker-mid - মধ্যবর্তী মার্কার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 3;
  marker-mid: url(#circle);
}
</style>
</head>
<body>

<svg width="300" height="150">

  <defs>
    <marker id="circle"
      markerWidth="10"
      markerHeight="10"
      refX="5"
      refY="5">
      <circle cx="5" cy="5" r="4"></circle>
    </marker>
  </defs>

  <path d="M30 100 L100 30 L170 100 L240 30"></path>

</svg>

</body>
</html>

marker-end - শেষ মার্কার নির্ধারণ করার উদাহরণ।

css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 3;
  marker-end: url(#arrow);
}
</style>
</head>
<body>

<svg width="300" height="120">

  <defs>
    <marker id="arrow"
      markerWidth="10"
      markerHeight="10"
      refX="5"
      refY="5"
      orient="auto">
      <path d="M0,0 L10,5 L0,10 Z"></path>
    </marker>
  </defs>

  <path d="M30 60 L270 60"></path>

</svg>

</body>
</html>

সিএসএস সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম বিবরণ
marker মার্কারের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।
marker-start শুরুর মার্কার নির্ধারণ করতে ব্যবহৃত হয়।
marker-mid মধ্যবর্তী মার্কার নির্ধারণ করতে ব্যবহৃত হয়।
marker-end শেষ মার্কার নির্ধারণ করতে ব্যবহৃত হয়।