Shape Outside for envelope

hello i have my animated envelope and i wanna make shapeoutside for bottom to fit in polygons on left and right

15 Replies

Patrik•2mo ago

2 triangles its an example what i want i wanna them to be at the bottom but still float to use shape outside perphaps some other solution will suit for this

Chris Bolson•2mo ago

Can you share the code that you have so far? Ideally in a codepen or similar? Doing so will make it easier both for people to understand what you want to do and to be able to help you.

Patrik•2mo ago

https://uiverse.io/SmookyDev/nasty-zebra-5 its where from i took template

Patrik•2mo ago

then add couple lines of text

Patrik•2mo ago

i want text to have same boundries as envelope

<div class="bg-cyan-600 w-1/2 aspect-video float-left mt-auto [clip-path:polygon(100%_100%,0_0,0_100%)] [shape-outside:polygon(100%_100%,0_0,0_100%)]" />
<div class="bg-cyan-600 w-1/2 aspect-video float-right mt-auto [clip-path:polygon(100%_0,0_100%,100%_100%)] [shape-outside:polygon(100%_0,0_100%,100%_100%)]" />

<div class="bg-cyan-600 w-1/2 aspect-video float-left mt-auto [clip-path:polygon(100%_100%,0_0,0_100%)] [shape-outside:polygon(100%_100%,0_0,0_100%)]" />
<div class="bg-cyan-600 w-1/2 aspect-video float-right mt-auto [clip-path:polygon(100%_0,0_100%,100%_100%)] [shape-outside:polygon(100%_0,0_100%,100%_100%)]" />

i have two triangles with shape

Chris Bolson•2mo ago

Rather than "mt-auto", try defining a value. "mt-12" seems to get them in the right place. However with shape-outside it is going to be tricky to get the contents in within the space, clearly it is going to depend on the actual length of the text (and size of the envelope etc.

Patrik•2mo ago

i guess somwhere exists a better solution than mt but thx

Chris Bolson•2mo ago

You could adjust the clip-paths themselves. I adjusted them to this:

<!-- shape left -->
    <div class="bg-cyan-600 w-1/2 h-full float-left [clip-path:polygon(0_30%,100%_80%,100%_100%,0_100%)] [shape-outside:polygon(0_15%,100%_75%,100%_100%,0_100%)]"></div>

    <!-- shape right -->
<div class="bg-cyan-600 w-1/2 h-full float-right [clip-path:polygon(0_80%,100%_30%,100%_100%,0_100%)] [shape-outside:polygon(0_75%,100%_15%,100%_100%,0_100%)]"></div>

<!-- shape left -->
    <div class="bg-cyan-600 w-1/2 h-full float-left [clip-path:polygon(0_30%,100%_80%,100%_100%,0_100%)] [shape-outside:polygon(0_15%,100%_75%,100%_100%,0_100%)]"></div>

    <!-- shape right -->
<div class="bg-cyan-600 w-1/2 h-full float-right [clip-path:polygon(0_80%,100%_30%,100%_100%,0_100%)] [shape-outside:polygon(0_75%,100%_15%,100%_100%,0_100%)]"></div>

Note - I remove the aspect ratio as that was preventing them from reaching the bottom of their container. I also removed the bottom padding on the container.

Patrik•2mo ago

thx i`ll try it!

Patrik•2mo ago

looks weird doesnt work as i expected...

Chris Bolson•2mo ago

The code that I shared was based on the link that you sent. Those captures look like they are based on different code so you will need to adapt it to fit. Ideally it would help if you shared the actual code.

Patrik•2mo ago

its almost same same container inside just other colors ive changed polygons a little

<div class="bg-cyan-400 w-1/2 h-full float-left [clip-path:polygon(0_63%,0_100%,100%_100%)] [shape-outside:polygon(0_63%,0_100%,100%_100%)]" />
<div class="bg-cyan-400 w-1/2 h-full float-right [clip-path:polygon(100%_63%,0_100%,100%_100%)] [shape-outside:polygon(100%_63%,0_100%,100%_100%)]" />

<div class="bg-cyan-400 w-1/2 h-full float-left [clip-path:polygon(0_63%,0_100%,100%_100%)] [shape-outside:polygon(0_63%,0_100%,100%_100%)]" />
<div class="bg-cyan-400 w-1/2 h-full float-right [clip-path:polygon(100%_63%,0_100%,100%_100%)] [shape-outside:polygon(100%_63%,0_100%,100%_100%)]" />

just want them to fit in boundries should work but idk why text is shrinking also we dont even need all this code, single div and bunch of text with these two polygons will be enough though

Chris Bolson•2mo ago

As I say, the actual numbers will depend on the rest of the code. Using custom properties might make this easier (especially if it were done using pure CSS). For reference, here is my fork of the code that you posted with the shape-outside percentages adjusted to fit the size of the envelope https://codepen.io/cbolson/pen/mdZqaOe (note - I removed the clip-path as it is only helpful for visulisation, it isn't actually needed)

Patrik•2mo ago

nah its okay i just have bunch custom vars in my config and its not necessary i got full idea with this example thats most important thing thx again)

Gaming

Programming

Shape Outside for envelope