सीएसएस के साथ एक सर्कल के चारों ओर टेक्स्ट कैसे लपेटें

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 . कहा जाता है ।

अब निम्नलिखित सीएसएस जोड़ें:

.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 में नहीं।