如何使用 CSS 和 HTML 使文本流入自定义形状

Question

我正在尝试制作文本可以流入的自定义形状。

从概念上讲，就像您想让 HTML 流成一首诗可能被布置的形状一样 - 与常规博客/文章流相反。

页面上还有其他项目，我希望文本四处流动； 所以我想用媒体查询改变形状的边界（图中的橙色部分）。

我在下面的小提琴中尝试了这种技术，但它只会改变一个边缘，而不是多个边缘。

感谢您的指点！

例子：

在这个小提琴中看到失败的尝试：

 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 class="shape-one"></div> <div class="shape-two"></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>

Answer 1

如我所见，您剪掉了第二个形状的错误一侧。 看一下代码片段。

错误的剪边：

正确剪边：

 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 class="shape-one"></div> <div class="shape-two"></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>