টুলটিপে ছোট ত্রিভুজ

টুলটিপগুলি হল ঘরে তৈরি খাবারের মতো: প্রত্যেকেই সেগুলি ব্যবহার করে এবং প্রত্যেকেরই তাদের নিজস্ব রেসিপি তৈরি করে। আপনি যদি একটি নির্দিষ্ট রেসিপি মনে না রাখেন, আপনি একটি অনুসন্ধান করবেন, এটি অনুসরণ করুন এবং আপনার দিনটি চালিয়ে যান। এই “একই জিনিস করার অনেক উপায়” ধারণাটি ওয়েব ডেভেলপমেন্ট এবং প্রোগ্রামিং (এবং জীবন!) এর জন্য সাধারণ, কিন্তু এটি এমন কিছু যা বিশেষত টুলটিপগুলির সাথে সত্য। এগুলি তৈরি করার কোনও বিশেষ উপায় নেই – এবং এই মুহুর্তে, এটির প্রয়োজন নেই – তাই লোকেরা সেই ফাঁকগুলি পূরণ করার জন্য বিভিন্ন উপায় নিয়ে আসে।

আজ, আমি রেসিপিটির মাত্র একটি ধাপে ফোকাস করতে চাই, যার নাম ভালো না থাকার কারণে, আমি শুধু কল করব টুলটিপে ছোট ত্রিভুজ. এটি সেই জিনিসগুলির মধ্যে একটি যা ন্যূনতম মনোযোগ পায় (অবশ্যই, আমি এটি লেখার আগে অনেক কিছু জানতাম না) তবে সেগুলি তৈরি করার কতগুলি উপায় রয়েছে তা আপনাকে অবাক করে। আসুন সবচেয়ে সহজ দিয়ে শুরু করি এবং সহজ নয়-এ আমাদের পথ তৈরি করি।

আদর্শভাবে, টুলটিপ শুধুমাত্র একটি উপাদান। আমরা শুধুমাত্র সেই ছোট্ট ত্রিভুজের জন্য আমাদের মার্কআপকে দূষিত করা এড়াতে চাই:

<span class="tooltip">I am a tooltip</span>

চতুর সীমান্ত

দৌড়ানোর আগে হাঁটা শিখতে হবে। এবং সেই ছোট্ট ত্রিভুজটি সংযুক্ত করার আগে আমাদের একটি ত্রিভুজ তৈরি করতে শিখতে হবে। হতে পারে একটি ত্রিভুজের জন্য সবচেয়ে বিস্তৃত রেসিপি হল বর্ডার ট্রিক, যা পাওয়া যাবে 2010 থেকে স্ট্যাক ওভারফ্লো সমস্যা অথবা এমনকি এখানে 2016 সালে ক্রিস দ্বারা.

সংক্ষেপে, সীমানাগুলি 45° কোণে একে অপরের সাথে মিলিত হয়, তাই যদি একটি উপাদানের সীমানা থাকে কিন্তু না width এবং heightসীমানা চারটি নিখুঁত ত্রিভুজ তৈরি করবে। কি বাকি আছে তিনটি সীমানা রং সেট করা হয় transparent এবং শুধুমাত্র একটি ত্রিভুজ দেখাবে! আপনি এটি একটি অ্যানিমেটেড সংস্করণ খুঁজে পেতে পারেন ক্রিস কোয়েরের কোডপেন

সাধারণত, আমাদের ছোট্ট ত্রিভুজটি টুলটিপের একটি ছদ্ম-উপাদান হবে, তাই আমাদের এর মাত্রা নির্ধারণ করতে হবে 0px (যা কিছু ::before এবং ::after ইতিমধ্যেই) এবং শুধুমাত্র একটি সীমানা একটি কঠিন রঙে সেট করুন। আমরা অন্যান্য সীমানা প্রশস্ত করে ত্রিভুজ ভিত্তির আকার নিয়ন্ত্রণ করতে পারি, এবং দৃশ্যমান সীমানাকে বড় করে উচ্চতা নিয়ন্ত্রণ করতে পারি।

.tooltip {
  &::before {
    content: "";

    border-width: var(--triangle-base);
    border-style: solid;
    border-color: transparent;

    border-top: var(--triangle-height) solid red;
  }
}

ত্রিভুজটিকে এর টুলটিপে সংযুক্ত করা নিজেই একটি শিল্প, তাই আমি মৌলিক বিষয়গুলির সাথে যাচ্ছি এবং ছোট ত্রিভুজের অবস্থান সেট করছি absolute এবং .tooltip থেকে relativeতারপর আমরা যেখানে চাই সেখানে স্থাপন করার জন্য এর ইনসেট বৈশিষ্ট্যগুলি নিয়ে খেলা। লক্ষ্য করার একমাত্র জিনিস হল যে আমাদের ছোট ত্রিভুজটিকে এর প্রস্থের জন্য অ্যাকাউন্টে অনুবাদ করতে হবে, -50% আমরা সঙ্গে তার অবস্থান সেট করা হয় left সম্পত্তি, এবং 50% যদি আমরা ব্যবহার করি right.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top);
    left: var(--triangle-left);

    transform: translateX(-50%);
  }
}

যাইহোক, আমরা এমনকি নতুন ব্যবহার করতে পারে অ্যাঙ্কর পজিশনিং কাজের জন্য বৈশিষ্ট্য। আপনি যে পদ্ধতিটি চয়ন করুন না কেন, আমাদের এখন সেই ছোট্ট ত্রিভুজটি টুলটিপের সাথে সংযুক্ত থাকা উচিত:

ঘোরানো বর্গক্ষেত্র

যে শেষ উদাহরণ থেকে একটি অপূর্ণতা হল যে আমরা ব্লক করছি border সম্পত্তি যাতে আমাদের অন্য কিছুর জন্য এটির প্রয়োজন হয়, আমরা ভাগ্যের বাইরে। যাইহোক, সেই ছোট্ট ত্রিভুজটি তৈরি করার জন্য আরেকটি পুরানো-বিদ্যালয় পদ্ধতি রয়েছে: আমরা একটি বর্গক্ষেত্রকে 45° ডিগ্রী দ্বারা ঘোরাই এবং টুলটিপের শরীরের পিছনে এটির অর্ধেক লুকিয়ে রাখি। এইভাবে, শুধুমাত্র কোণটি একটি ত্রিভুজ আকারে দেখায়। আমরা একটি ছদ্ম-উপাদান থেকে বর্গক্ষেত্র তৈরি করতে পারি:

.tooltip {
  &::before {
    content: "";

    display: block;
    height: var(--triangle-size);
    width: var(--triangle-size);

    background-color: red;
  }
}

তারপর, টুলটিপের শরীরের পিছনে এটি অবস্থান করুন। এই ক্ষেত্রে, যেমন শুধুমাত্র এক-অর্ধেক দেখায়. যেহেতু বর্গক্ষেত্রটি ঘোরানো হয়, রূপান্তরটি উভয় অক্ষে হবে।

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: 75%;
    left: 50%;
    z-index: -1; /* So it's behind the tooltip's body */

    transform: translateX(-50%);
    transform: rotate(45deg) translateY(25%) translateX(-50%);
  }
}

আমি আরও দেখেছি যে এই পদ্ধতিটি অ্যাঙ্কর পজিশনিংয়ের সাথে আরও ভাল কাজ করে কারণ যখনই আমরা এটিকে ঘুরিয়ে দেখি তখন আমাদের ছোট ত্রিভুজের শৈলী পরিবর্তন করতে হবে না। সীমানা পদ্ধতির বিপরীতে, যেখানে দৃশ্যমান সীমানা দিকনির্দেশের উপর নির্ভর করে পরিবর্তিত হয়।

সঙ্গে বর্গক্ষেত্র ছাঁটা clip-path

যদিও আমি আগে এটি উল্লেখ করিনি, আপনি সেই শেষ পদ্ধতিতে কিছু সমস্যা লক্ষ্য করেছেন। প্রথমত, এটি ঠিক একটি ত্রিভুজ নয়, তাই এটি সবচেয়ে বুলেটপ্রুফ টেক নয়; টুলটিপ খুব ছোট হলে, বর্গক্ষেত্রটি উপরের দিকে লুকিয়ে যেতে পারে এবং সরাতে পারে মিথ্যা ত্রিভুজ পক্ষ থেকে তার প্রকৃত বর্গ প্রকৃতি প্রকাশ করে। আমরা ব্যবহার করে উভয় সমস্যা সমাধান করতে পারেন clip-path সম্পত্তি

দ clip-path প্রপার্টি আমাদের বাকি অংশ ক্লিপ করার সময় প্রদর্শনের জন্য একটি উপাদানের একটি অঞ্চল নির্বাচন করতে দেয়। আমরা যে পথটি ছাঁটাই করতে চাই সেটি প্রদান করে এটি কাজ করে এবং যেহেতু আমরা একটি বর্গক্ষেত্র থেকে একটি ত্রিভুজ চাই, তাই আমরা ব্যবহার করতে পারি polygon() ফাংশন এটি উপাদানে পয়েন্ট নেয় এবং সরল রেখায় তাদের মধ্য দিয়ে ছাঁটাই করে। পয়েন্টগুলি মূল থেকে শতাংশ হিসাবে লেখা যেতে পারে (অর্থাৎ, উপরের-বাম কোণে), এবং এই ক্ষেত্রে, আমরা তিনটি বিন্দুর মধ্য দিয়ে ছাঁটাই করতে চাই 0% 0% (উপর-বাম কোণে), 100% 0% (উপর-ডান কোণে) এবং 50% 100% (নীচ-কেন্দ্র বিন্দু)।

সুতরাং, দ clip-path মান হবে polygon() একটি কমা দ্বারা পৃথক করা তালিকায় সেই তিনটি পয়েন্টের সাথে ফাংশন:

.tooltip {
  &::before {
    content: "";

    width: var(--triangle-base);
    height: var(--triangle-height);

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: translate(-50%);

    background-color: red;
  }
}

এই সময়, আমরা সেট করব top এবং left CSS ভেরিয়েবল ব্যবহার করে বৈশিষ্ট্য, যা পরে কাজে আসবে।

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top); /* 100% */
    left: var(--triangle-left); /* 50% */

    transform: translate(-50%);
  }
}

এবং এখন আমাদের টুলটিপের সাথে একটি সত্যিকারের ছোট ত্রিভুজ সংযুক্ত করা উচিত:

যাইহোক, যদি আমরা ছোট ত্রিভুজটিকে যেকোনো বাহুর শেষ প্রান্তে নিয়ে যাই, আমরা এখনও দেখতে পাব কিভাবে এটি টুলটিপের বডি থেকে পিছলে যায়। ভাগ্যক্রমে, clip-path সম্পত্তি আমাদের ত্রিভুজের আকৃতির আরও ভাল নিয়ন্ত্রণ দেয়। এই ক্ষেত্রে, আমরা ছোট ত্রিভুজের অনুভূমিক অবস্থানের উপর নির্ভর করে ট্রিমটি যে বিন্দুগুলির মধ্য দিয়ে যায় তা পরিবর্তন করতে পারি। উপরের-বাম কোণে, আমরা এটির অনুভূমিক মান কাছে যেতে চাই 50% যখন টুলটিপের অবস্থান কাছে আসে 0%যখন উপরের-ডান কোণে যেতে হবে 50% যখন টুলটিপ অবস্থান কাছে আসে 100%.

নিম্নলিখিত min() + max() কম্বো ঠিক এটি করে:

.tooltip {
  clip-path: polygon(
    max(50% - var(--triangle-left), 0%) 0,
    min(150% - var(--triangle-left), 100%) 0%,
    50% 100%
  );
}

দ calc() যেমন গণিত ফাংশন ভিতরে ফাংশন প্রয়োজন হয় না min() এবং max().

টুলটিপটি চারপাশে সরানোর চেষ্টা করুন এবং অনুভূমিক অক্ষের উপর এটির উপর নির্ভর করে এটির আকৃতি কীভাবে পরিবর্তিত হয় তা দেখুন:

ব্যবহার করে border-image সম্পত্তি

দেখে মনে হতে পারে আমাদের শেষ ছোট্ট ত্রিভুজটি চূড়ান্ত ত্রিভুজ। যাইহোক, এমন একটি পরিস্থিতি কল্পনা করুন যেখানে আপনি ইতিমধ্যে উভয় ছদ্ম-উপাদান ব্যবহার করেছেন এবং ছোট ত্রিভুজের জন্য একটিকে ছাড়তে পারবেন না, বা সহজভাবে বলতে গেলে, আপনি কোনও ছদ্ম-উপাদান ছাড়াই এটি করার আরও মার্জিত উপায় চান। কাজটি অসম্ভব বলে মনে হতে পারে, কিন্তু আমরা কাজের জন্য দুটি বৈশিষ্ট্য ব্যবহার করতে পারি: ইতিমধ্যেই দেখা clip-path এবং border-image সম্পত্তি

ব্যবহার করে clip-path সম্পত্তি, আমরা একটি টুলটিপের আকৃতি ছাঁটাই করতে পারি — ছোট ত্রিভুজ অন্তর্ভুক্ত করে! — সরাসরি উপাদানের বাইরে। সমস্যা হল যে উপাদানটির পটভূমি ছোট ত্রিভুজটির জন্য যথেষ্ট বড় নয়। যাইহোক, আমরা ব্যবহার করতে পারেন border-image একটি overgrown পটভূমি করতে সম্পত্তি. সিনট্যাক্স একটু জটিল, তাই আমি এটি পড়ার পরামর্শ দিই সম্পূর্ণ ডুব border-image তেমানি আফিফ দ্বারা. সংক্ষেপে, এটি আমাদের একটি উপাদানের সীমানা হিসাবে একটি চিত্র বা CSS গ্রেডিয়েন্ট ব্যবহার করার অনুমতি দেয়। এই ক্ষেত্রে, আমরা ত্রিভুজ উচ্চতার মতো চওড়া এবং একটি কঠিন রঙ দিয়ে একটি সীমানা তৈরি করছি।

.tooltip {
  border-image: fill 0 // var(--triangle-height) conic-gradient(red 0 0);;
}

এবারের ট্রিমটি একটু বেশি জটিল হবে, যেহেতু আমরা ছোট ত্রিভুজটিও ট্রিম করব, তাই আরও পয়েন্ট প্রয়োজন। ঠিক, নিম্নলিখিত সাত পয়েন্ট:

এটি নিম্নলিখিত অনুবাদ করে clip-path মান:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    calc(50% + var(--triangle-base) / 2) 100%,
    50% calc(100% + var(--triangle-height)),
    calc(50% - var(--triangle-base) / 2) 100%
  );
}

টুলটিপের যেকোনো পাশ দিয়ে গেলেই আমরা ছোট ত্রিভুজ নীচের বিন্দুটিকে ক্যাপ করে এটিকে স্মার্ট করে তুলতে পারি:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    min(var(--triangle-left) + var(--triangle-base) / 2, 100%) 100%,
    var(--triangle-left) calc(100% + var(--triangle-height)),
    max(var(--triangle-left) - var(--triangle-base) / 2, 0%) 100%
  ;
}

এবং এখন আমাদের টুলটিপের চূড়ান্ত ছোট ত্রিভুজ আছে, যেটি মূল অংশের অংশ এবং শুধুমাত্র একটি উপাদান ব্যবহার করে!

আরও তথ্য

সম্পর্কিত কৌশল!