CSS shape-outside দিয়ে টেক্সটকে বৃত্তাকার এলিমেন্টের চারপাশে র‍্যাপ করা

CSS shape-outside প্রপার্টি ব্যবহার করে প্যারাগ্রাফ টেক্সট ব্লককে একটি বৃত্তাকার এলিমেন্টের চারপাশে র‍্যাপ করার পদ্ধতি শিখুন।

কন্টেন্ট প্রেজেন্টেশন আরও আকর্ষণীয় এবং ম্যাগাজিন-স্টাইল করতে চাইলে CSS দিয়ে টেক্সটকে এলিমেন্টের চারপাশে আলাদা ভাবে অ্যালাইন/র‍্যাপ করানো যায়।

HTML

<article class="post"> 
  <img class="circle" src="..." alt="A globus" /> 
  <p>Lorem ipsum dolor sit amet...</p> 
  <p>Lorem ipsum dolor sit amet...</p> 
  <p>Lorem ipsum dolor sit amet...</p> 
  <p>Lorem ipsum dolor sit amet...</p> 
</article>

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: circle(50%) দিয়ে—যেটা সব আধুনিক ব্রাউজার সাপোর্ট করে (Internet Explorer ছাড়া)।

CSS shape-outside দিয়ে টেক্সটকে বৃত্তাকার এলিমেন্টের চারপাশে র‍্যাপ করা