সিএসএস দিয়ে কীভাবে একটি বৃত্তের চারপাশে পাঠ্য মোড়ানো যায়

কিভাবে CSS দিয়ে একটি বৃত্তাকার উপাদানের চারপাশে একটি অনুচ্ছেদ পাঠ্য ব্লক মোড়ানো যায়।

আপনি যদি আপনার বিষয়বস্তু উপস্থাপনাকে আরও কিছুটা আকর্ষণীয় এবং ম্যাগাজিন-ইশ করতে চান, তাহলে আপনি CSS ব্যবহার করে আপনার পাঠ্যকে সারিবদ্ধ করতে এবং উপাদানগুলির সাথে আকর্ষণীয় উপায়ে মোড়ানো করতে পারেন।

প্রথমে কিছু HTML কন্টেন্ট যোগ করা যাক:

<article class="post">
  <img
    class="circle"
    src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
    alt="A globus"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
    voluptas omnis, quis, est vitae?
  </p>
</article>

লক্ষ্য করুন যে <article> এলিমেন্টের post নামে একটি ক্লাস আছে এবং <img> উপাদানটির .circle নামে একটি শ্রেণী রয়েছে .

এখন নিম্নলিখিত CSS যোগ করুন:

.post {
  max-width: 800px;
  margin: 3rem auto;
}

.circle {
  float: right;
  height: 30vw;
  margin-left: 1rem;
  margin-left: calc(1rem + 2vw);
  object-fit: cover;
  shape-outside: circle(50%);
  width: 30vw;
}

ফলাফল এই মত হওয়া উচিত:

সিএসএস দিয়ে কীভাবে একটি বৃত্তের চারপাশে পাঠ্য মোড়ানো যায়

খারাপ না, তাই না?

"জাদু" আসে shape-outside থেকে CSS প্রপার্টি যা সব নতুন ব্রাউজারে সমর্থিত — কিন্তু Internet Explorer-এ নয়।