How do you make text flow into a custom shape with CSS and HTML-CodePudding

I'm trying to make a custom shape that text can flow in.

Conceptually, in a similar way as if you wanted to have HTML flow in a shape that a poem might be laid out - as opposed to regular blog/ article flow.

There are other items on the page that I want the text to flow around; so I want to change the bounds of the shape (in orange in the diagram) with media queries.

I tried this technique in the fiddle below, but it only would change one edge, not multiple edges.

Thanks for any pointers!

EXAMPLE:

See failed attempt in this fiddle:

body {
  margin: 0 auto;
  max-width: 750px;
  font-size: 10px;
}

.shape-one {
  shape-outside: polygon(0 0, 27% 0, 28% 19%, 24% 38%, 28% 62%, 0 99%);
  background-color: rgba(221, 221, 221, 0.378);
  /* clip-path: inset(0 0 10px 0); */
  /* background-color: red; */
  width: 60vw;
  height: 20vw;
  float: left;
}

.shape-two {
  shape-outside: polygon(0 0, 27% 0, 28% 19%, 24% 38%, 28% 62%, 0 99%);
  background-color: rgba(135, 14, 135, 0.234);
  width: 30vw;
  height: 20vw;
  float: right;
}

p {
  position: relative;
  width: 60vw;
  line-height: 2vw;

  margin-right: 5vw;
  margin-bottom: 1vw;
}

   <h3>This is not working how I want it to:</h3>
   
   <div>
      <div ></div>
      <div ></div>
      <p>
        Pudding chocolate cake gummies tootsie roll ice cream marzipan ice cream
        lemon drops. Cookie oat cake chocolate bar jelly-o fruitcake. Pie toffee
        candy canes cookie bear claw. Toffee biscuit toffee icing candy canes.
        Sesame snaps marshmallow gummies apple pie cake pie muffin. Marzipan
        biscuit bonbon carrot cake tart ice cream cotton candy lemon drops
        macaroon.
      </p>
      <p>
        Sweet icing icing cupcake candy canes. Tart chocolate bar muffin dragée
        topping shortbread. Cake gummi bears powder candy canes muffin dragée
        jelly-o. Dessert tart donut pastry candy croissant oat cake cupcake.
        Gummi bears chocolate cake lemon drops brownie candy canes dessert
        tiramisu marshmallow pastry. Donut sugar plum cookie candy fruitcake
        cupcake gummies. Tiramisu tart chocolate bar cookie pudding cookie
        cupcake. Jelly beans chocolate cake pudding chocolate bar gummies
        pudding candy.
      </p>
      <p>
        Marzipan toffee halvah gingerbread lemon drops gummies cupcake gummi
        bears. Marzipan pie marzipan jelly-o lemon drops carrot cake. Jelly
        dragée soufflé pudding danish chocolate bar bonbon. Powder gingerbread
        cotton candy apple pie candy fruitcake jelly-o wafer cake. Donut biscuit
        cookie brownie brownie powder. Macaroon caramels carrot cake jelly-o
        carrot cake caramels. Cheesecake cookie chupa chups icing gummi bears
        jelly-o chocolate cake gummi bears wafer. Gummi bears brownie shortbread
        tart halvah. Ice cream marzipan cheesecake chocolate bar apple pie.
        Sweet roll marshmallow soufflé candy powder icing jelly-o. Fruitcake
        macaroon candy canes lemon drops marshmallow gummies powder dragée
        biscuit. Cheesecake sweet roll caramels gummi bears gummies tart pastry.
      </p>
      <p>
        Lollipop lollipop powder cookie chocolate bar macaroon topping
        gingerbread sweet. Tiramisu tootsie roll toffee candy canes cake. Cookie
        fruitcake dessert gummies cake bear claw lemon drops gummies. Jelly-o
        muffin cupcake candy icing toffee jelly. Apple pie lollipop cake pastry
        pie jelly-o. Bonbon powder gingerbread dessert dragée tiramisu. Candy
        canes lemon drops sweet roll brownie muffin bear claw macaroon cake
        jujubes. Pudding lollipop bonbon macaroon cupcake. Jujubes bonbon
        croissant jujubes chupa chups. Gummies donut cake sweet apple pie
        tiramisu sweet powder. Pudding soufflé bonbon muffin oat cake chocolate
        cake croissant. Soufflé lollipop topping pie jelly beans biscuit toffee.
        Lollipop shortbread shortbread topping tootsie roll jujubes cake bear
        claw icing. Carrot cake cake oat cake cookie sesame snaps.
      </p>

      <p>
        Pie tart dessert cake bear claw candy liquorice cheesecake. Toffee
        halvah fruitcake oat cake danish gummi bears muffin. Caramels biscuit
        tiramisu gummi bears chocolate chocolate bar.
      </p>

      <p>
        Croissant jelly danish cheesecake caramels caramels. Cupcake cake gummi
        bears marzipan dessert pastry. Lemon drops jelly carrot cake chupa chups
        marshmallow dessert danish macaroon croissant. Tootsie roll liquorice
        danish ice cream jelly cheesecake marshmallow. Powder caramels
        shortbread cotton candy marshmallow jelly beans topping sugar plum
        fruitcake. Lollipop jelly donut cake donut toffee carrot cake. Pudding
        apple pie chocolate cake candy sweet roll lemon drops gingerbread. Cake
        lemon drops muffin cake pastry sesame snaps lemon drops. Tart dessert
        croissant soufflé chupa chups chocolate cake.
      </p>
    </div>

CodePudding user response：

As I can see, you have clipped wrong side of the second shape. Take a look on code snippet.

Wrong clipping side:

Correct clipping side:

body {
  margin: 0 auto;
  max-width: 750px;
  font-size: 10px;
}

.shape-one {
  shape-outside: polygon(0 0, 27% 0, 28% 19%, 24% 38%, 28% 62%, 0 99%);
  background-color: rgba(221, 221, 221, 0.378);
  /* clip-path: inset(0 0 10px 0); */
  /* background-color: red; */
  width: 60vw;
  height: 20vw;
  float: left;
}

.shape-two {
  shape-outside: polygon(100% 0, 0 32%, 47% 56%, 31% 100%, 100% 100%); /* should be clipped other side */
  background-color: rgba(135, 14, 135, 0.234);
  width: 30vw;
  height: 20vw;
  float: right;
}

p {
  position: relative;
  /*width: 60vw;*/
  line-height: 2vw;

  margin-right: 5vw;
  margin-bottom: 1vw;
}

<h3>This is not working how I want it to:</h3>
   
   <div>
      <div ></div>
      <div ></div>
      <p>
        Pudding chocolate cake gummies tootsie roll ice cream marzipan ice cream
        lemon drops. Cookie oat cake chocolate bar jelly-o fruitcake. Pie toffee
        candy canes cookie bear claw. Toffee biscuit toffee icing candy canes.
        Sesame snaps marshmallow gummies apple pie cake pie muffin. Marzipan
        biscuit bonbon carrot cake tart ice cream cotton candy lemon drops
        macaroon.
      </p>
      <p>
        Sweet icing icing cupcake candy canes. Tart chocolate bar muffin dragée
        topping shortbread. Cake gummi bears powder candy canes muffin dragée
        jelly-o. Dessert tart donut pastry candy croissant oat cake cupcake.
        Gummi bears chocolate cake lemon drops brownie candy canes dessert
        tiramisu marshmallow pastry. Donut sugar plum cookie candy fruitcake
        cupcake gummies. Tiramisu tart chocolate bar cookie pudding cookie
        cupcake. Jelly beans chocolate cake pudding chocolate bar gummies
        pudding candy.
      </p>
      <p>
        Marzipan toffee halvah gingerbread lemon drops gummies cupcake gummi
        bears. Marzipan pie marzipan jelly-o lemon drops carrot cake. Jelly
        dragée soufflé pudding danish chocolate bar bonbon. Powder gingerbread
        cotton candy apple pie candy fruitcake jelly-o wafer cake. Donut biscuit
        cookie brownie brownie powder. Macaroon caramels carrot cake jelly-o
        carrot cake caramels. Cheesecake cookie chupa chups icing gummi bears
        jelly-o chocolate cake gummi bears wafer. Gummi bears brownie shortbread
        tart halvah. Ice cream marzipan cheesecake chocolate bar apple pie.
        Sweet roll marshmallow soufflé candy powder icing jelly-o. Fruitcake
        macaroon candy canes lemon drops marshmallow gummies powder dragée
        biscuit. Cheesecake sweet roll caramels gummi bears gummies tart pastry.
      </p>
      <p>
        Lollipop lollipop powder cookie chocolate bar macaroon topping
        gingerbread sweet. Tiramisu tootsie roll toffee candy canes cake. Cookie
        fruitcake dessert gummies cake bear claw lemon drops gummies. Jelly-o
        muffin cupcake candy icing toffee jelly. Apple pie lollipop cake pastry
        pie jelly-o. Bonbon powder gingerbread dessert dragée tiramisu. Candy
        canes lemon drops sweet roll brownie muffin bear claw macaroon cake
        jujubes. Pudding lollipop bonbon macaroon cupcake. Jujubes bonbon
        croissant jujubes chupa chups. Gummies donut cake sweet apple pie
        tiramisu sweet powder. Pudding soufflé bonbon muffin oat cake chocolate
        cake croissant. Soufflé lollipop topping pie jelly beans biscuit toffee.
        Lollipop shortbread shortbread topping tootsie roll jujubes cake bear
        claw icing. Carrot cake cake oat cake cookie sesame snaps.
      </p>

      <p>
        Pie tart dessert cake bear claw candy liquorice cheesecake. Toffee
        halvah fruitcake oat cake danish gummi bears muffin. Caramels biscuit
        tiramisu gummi bears chocolate chocolate bar.
      </p>

      <p>
        Croissant jelly danish cheesecake caramels caramels. Cupcake cake gummi
        bears marzipan dessert pastry. Lemon drops jelly carrot cake chupa chups
        marshmallow dessert danish macaroon croissant. Tootsie roll liquorice
        danish ice cream jelly cheesecake marshmallow. Powder caramels
        shortbread cotton candy marshmallow jelly beans topping sugar plum
        fruitcake. Lollipop jelly donut cake donut toffee carrot cake. Pudding
        apple pie chocolate cake candy sweet roll lemon drops gingerbread. Cake
        lemon drops muffin cake pastry sesame snaps lemon drops. Tart dessert
        croissant soufflé chupa chups chocolate cake.
      </p>
    </div>