Html - Make a Div block wrap around a shape

MonkJie
March 18, 2024
214 views
0 votes
2 Answers

I am pretty new with HTML, CSS and I wanted to know if this layout is possible to achieve.

I have tried using the shape-outside property. But the result is coming out like this:

This is what I have done so far:
Codepen link

.container {
    display: block;
    max-width: 1366px;
    margin: 0 auto;
}

.img-wrapper {
  border-radius: 50%;
    width: 427px;
    height: 427px;
    shape-outside: circle();
    float: left;
    overflow: hidden;
  margin-right: 4rem;
  margin-top: 8rem;
}

.image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cont{
  display:flex;
  flex-direction: column;
}

<div class="container">
<div class="img-wrapper">
    <img src="https://picsum.photos/id/237/200/300" loading="lazy" alt="" class="image">
</div>
<div class="content-wrapper">
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
  </div>
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
  </div>
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
 </div>
  <div class="cont">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
  </div>
  </div>
</div>

Answers

shape-outside is the correct approach, but some of your other styling was interfering with its operation. Here’s a working starting point:

.image1, .image2 {
  border-radius: 50%;
  object-fit: cover;
}

.image1 {
  width: 500px;
  height: 500px;
  float: left;
  shape-outside: circle(50%);
  transform: scale(0.9);
}

.image2 {
  width: 80px;
  height: 80px;
}

.content-wrapper>div {
  display: flex;
  gap: 1em;
  border: 1px solid red;
}

<div class="container">
  <img src="https://picsum.photos/id/237/900/900" loading="lazy" alt="" class="image1">
  <div class="content-wrapper">
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/200/200" loading="lazy" alt="" class="image2">
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
        </p>
      </div>
    </div>
  </div>
</div>

This was a good yet silly problem to solve. You can use the float property with the shape-outside() property to wrap all your things according to the circle or image that you have.

shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

.container-wrapper {
        display: flex;
        justify-content: center;
      }

      .container {
        max-width: 1100px;
        width: 100%;
      }

      .img-wrapper {
        width: 500px;
        height: 500px;
        border-radius: 50%;
        float: left;
        shape-outside: circle();
        margin-right: 20px;
        overflow: hidden; 
      }

      .image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

<div class="container-wrapper">
      <div class="container">
        <div class="img-wrapper">
          <img
            src="https://picsum.photos/id/237/200/300"
            loading="lazy"
            alt=""
            class="image"
          />
        </div>

        <div class="content-wrapper">
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
          <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
              aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
              eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
              est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
              velit, sed quia non numquam eius modi tempora incidunt ut labore
              et dolore magnam aliquam quaerat voluptatem.
            </p>
          </div>
        </div>
      </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Make a Div block wrap around a shape

Answers