15

I'm trying to wrap the text round the image used from both side like this: enter image description here

here is the html.

            <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <p>
                        There’s nothing like the feeling of driving a brand new luxury car or fully equipped SUV – especially if it’s free!  That’s right!  As part of B-Epic’s Compensation Plan, one of the awesome ways we reward our Brand Partners is with a car payment bonus of $500 per month.
                    </p> 
                    <p>
                        With our one-of-a-kind Car Bonus program, you only need to focus on one simple thing: Get 4 Brand Partners on the $89.95 package and then just teach them to do the same thing. Get 4, teach 4... it doesn't get any easier than that.
                    </p>
                    <p>
                        You earn the Car Bonus by purchasing a $89.95 pack or higher and sponsoring four Brand Partners at that same package level or higher who also sponsor four Brand Partners each at that package level or higher.  You are paid this bonus every month that you maintain the qualifications for it.

                    </p>
        </div>
                <img src="images\img3.jpg" class="element" alt="image">
                <div class="col-lg-4">
                    <p>What’s even better is that instead of requiring you to drive a specific make and model, you get to pick out any car (or truck, SUV, or even motorcycle) that you want…in the color of your choice!  Buy it or lease it – it’s completely up to you! 
                    </p>
                </div>
            </div>
        </div>

Css for element class used in image tag

.element
   {
 shape-outside: circle(50%);
 width: 300px;
 height: 300px;
 float: left;

 }

Please share the code to have the effect like the one in the image above.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
mehmood khan
  • 497
  • 1
  • 7
  • 20

1 Answers1

11

Here is an idea based on this previous answer where I will add the margin factor to control the space between text and image:

div.box {
  border:1px solid red;
  margin:5px;
  font-size: 0;
  max-width: 600px;
  --R:100px; /* radius */
  --m:5px;   /* margin */
  --t:10px;  /* distance from top */
}

div.box p {
  width: 50%;
  margin:0;
  padding:0 var(--m);
  display: inline-block;
  vertical-align:top;
  font-size: initial;
  text-align: justify;
}

div.box p:before {
  content: "";
  width: var(--R);
  height: calc(2*var(--R));
  padding:var(--m) 0 var(--m) var(--m);
  margin-top:var(--t);
  background:var(--img) content-box;
  background-size:200% 100%;
  shape-outside: circle(var(--R) at var(--d,right) calc(-1*var(--m)) top calc(50% + var(--t)/2));
  float: right;
  border-radius: 500px 0 0 500px;
  margin-right:calc(-1*var(--m));
}

div.box p:last-child:before {
  float: left;
  padding:var(--m) var(--m) var(--m) 0;
  --d:left;
  background-position:right;
  border-radius:0 500px 500px 0;
  margin-left:calc(-1*var(--m));
  margin-right:0;
}

*,*::before,*::after {
  box-sizing:border-box;
}
<div class="box" style="--img:url(https://i.picsum.photos/id/1011/400/400.jpg)">
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
</div>
<div class="box" style="--img:url(https://i.picsum.photos/id/248/400/400.jpg);--R:80px;--m:10px;--t:30px;">
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>

</div>
<div class="box" style="--img:url(https://i.picsum.photos/id/1074/400/400.jpg);--R:150px;--m:2px;--t:30px;">
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,  illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>
  <p>
    Lorem ipsum dolor sit amet, consect etur adipisicing elit. Ex sapiente iste   asp ernatur, illum esse veniam eligendi, dolor conse quuntur iure, cumque laud antium quidem ratione perfe rendis minima digniss <br><br>Sed, placeat.Lorem ipsum dolor sit amet, consectetur adipis icing elit. Ex sap iente iste repudi andae aspe rnatur, illum esse veniam eligendi, dolor conseq uuntur iure,  illum esse veniam eligendi, dolor conseq uuntur iure, 
  </p>

</div>

CSS text around rounded image

Related question if you want the opposite effect (text inside the circle): How can I ensure that text is inside rounded div?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This solution still only supports **two column layout** of text with the image only where they touch. What I want is a **continuous block** of text with an image with **arbitrary position** with the text wrapping around from all sides. – Qwerty Mar 13 '20 at 12:22
  • 1
    @Qwerty *What I want is a continuous block* --> you should either ask a new question or clarify this inside the bounty. The actual question doesn't state this and I have answered it as it is now. – Temani Afif Mar 13 '20 at 12:29
  • The problem is that I haven't read the question carefully, because not even the two column layout is ever mentioned, but is implicit from the code... – Qwerty Mar 13 '20 at 12:31
  • @Qwerty what you are looking for can be done using exclusion: https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/ but the support is still very low for most of the modern browser – Temani Afif Mar 13 '20 at 12:45
  • Oh yeah, I am just looking at the draft https://drafts.csswg.org/css-exclusions-1 so sad – Qwerty Mar 13 '20 at 12:47
  • I did my homework: **wrap text around an image or shape from both sides** https://stackoverflow.com/q/60671721/985454 – Qwerty Mar 13 '20 at 13:54
  • @Qwerty You may also want to link to this question to clearly state that you don't want this behavior to avoid having answer repeating the same here. – Temani Afif Mar 13 '20 at 14:29
  • You're right, I thought it would be enough to have it linked in the side panel, but mentioning it as such will be better. – Qwerty Mar 13 '20 at 15:21