Struggling with shape-outside; add an ellipse shape to the sides of the divs (view image pls)

HTML-CSS
#1

So basically I need to make the sides as ellipse shape like this:

image
image1222×544 145 KB

But all my attempts don’t work.
Here’s a pen with my current code.
https://codepen.io/Snippet/pen/gOwjgwB
Do note: the number of items in the right and left are variable, so using different padding for every item is not a good solution IMHO

#2

I don’t understand what you mean by “make the sides as ellipsis”. I’m used to the punctuation mark called that - I don’t see it in the image.

#4

Oh Okey In explain I meant that the text on the sides wraps around the div with the image in an elliptic way like this:

image
Hope that is more clear I apologize for that

#5

OK, so you mean wrapping the text around an ellipse shape.

#6

Yes that is :sweat_smile: I edited to post with the correct word

#7

Is this what you are looking for?

#8

Yes I tried that but I can’t get it to work with my code (codepen above)
Edit:this code may be closer/more useful as it wraps inside a div?
https://codepen.io/tylersticka/pen/VwwLaBN

1 Like
#9

I guess I’m confused about what you want. I think you want the text to be outside a vertical oval and wrapping around it on both sides.

#10

Yep! just like in the first image/mockup. I’m open to other ways to do it though as I’m out of ideas, just not using padding/margin per each item as that seems to me as a bad practice since th number of items is variable.

#11

I was messing around and got this far. I haven’t gotten it to work with an ellipse. Wrapping around something in the center appears to be difficult. Another approach would be to split the area into a left and a right div, each of which has a floated, overlapping ellipse in the “center” (to the side of each div) and wrap those separately.

#12

Right, I don’t think this is going to be an easy solution. I would google “wrap text around centered shape” and see the answers and solutions. I’m not enough of a CSS wizard to make it work well.

#13

Another approach would be to split the area into a left and a right div, each of which has a floated, overlapping ellipse in the “center” (to the side of each div) and wrap those separately.

I prefer this option, because for mobile screens and tablet there’s no rounding so I need it for a sepaate divs like in the codepen https://codepen.io/Snippet/pen/gOwjgwB Edit: also the order changes so im using divs with flex order

#14

Another option, especially if this is dynamically generated content, is to use JS to calculate the offsets necessary and set them in the JS code. The issue I have with that is that each of your text sections would have to have a known height, I would think. It would take some tinkering, but it could work.

#15

If we cant make it work, then yes I guess we could use JS. Can you please edit the codepen? https://codepen.io/Snippet/pen/gOwjgwB I made some changes so that the div on the left has the class “card-beneficios-left” and the right “card-beneficios-right”. I’m trying to adapt your code right now, but I cant use a svg in the center it has to be a div.
Okey adapted here https://codepen.io/Snippet/pen/RwGBOEP now trying to use an oval shape

#16

I’m not super convinced this is a great solution to this layout.

It sounds nice on paper but I think you will just end up with a static layout that only works at some screen sizes and will likely still depend on the content. I might be wrong though, I would really have to see it in the context of the actual content being used.

How are you getting the content, is it a CMS, or do you have some fixed versions of the layout (with the different content) you can code against?

#17

How are you getting the content, is it a CMS

Yes, Wordpress.

I would really have to see it in the context of the actual content being used.

Here you go (this one is the coded version, do note there are way more items than expected initially by the client).

image
image1898×781 230 KB

or do you have some fixed versions of the layout (with the different content) you can code against?

I previously created mockups for desktop, tablet and mobile sizes.
Desktop is in the first post.

Tablet mockup:

image
image609×793 112 KB

Mobile mockup:

image

As you can tell I only need the oval thing for the desktop size

#18

Is there anything stopping the client from changing the content themselves later, or come up with new content that the layout would need to work with (i.e. content you haven’t tested the layout against).

I feel like this is one of those layouts you or a designer comes up with within an image editor or prototyping tool that later proves more difficult to get to work with actual dynamic content. If the content is guaranteed to be some fixed amount of paragraphs and line length what you are doing might work. But I doubt it will be able to handle whatever you throw at it on its own. It’s very likely each version of the layout will need some tweaks no matter what.

#19

Is there anything stopping the client from changing the content themselves later, or come up with new content that the layout would need to work with (i.e. content you haven’t tested the layout against).

Well the idea is that the client doesn’t depend on a dev for it…

I feel like this is one of those layouts you or a designer comes up with within an image editor or prototyping tool that later proves more difficult to get to work with actual dynamic content.

Can’t agree more.

But I doubt it will be able to handle whatever you throw at it on its own

I still would like to give it a go, many things I thought impossible or no idea how to do proved me they were possible.

#20

What about using a transparent svg on each side, which could be made responsive or adapted?

#21

Well I was pointed to this https://stackoverflow.com/a/60654583/8730864
I tried to adapt it to my code/codpen and couldn’t :confused:
Im’postingn here the code of it

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>