วิธีตัดข้อความรอบวงกลมด้วย CSS

วิธีห่อบล็อกข้อความย่อหน้ารอบองค์ประกอบวงกลมด้วย 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