如何使用 CSS 和 HTML 使文本流入自定义形状
How do you make text flow into a custom shape with CSS and HTML
我正在尝试制作文本可以流入的自定义形状。
从概念上讲，就像您希望 HTML 以诗歌可能布局的形状流动一样 - 与常规博客/文章流动相反。
我希望文本在页面上四处流动的其他项目；所以我想用媒体查询改变形状的边界（图中的橙色部分）。
我在下面的 fiddle 中尝试了这种技术，但它只会改变一条边，而不是多条边。
感谢指点！
示例：
看到失败的尝试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 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>
如我所见，您剪错了第二个形状的一侧。
查看代码片段。
错误的剪裁面：
正确的剪边：
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>
我正在尝试制作文本可以流入的自定义形状。
从概念上讲，就像您希望 HTML 以诗歌可能布局的形状流动一样 - 与常规博客/文章流动相反。
我希望文本在页面上四处流动的其他项目；所以我想用媒体查询改变形状的边界（图中的橙色部分）。
我在下面的 fiddle 中尝试了这种技术，但它只会改变一条边，而不是多条边。
感谢指点！
示例：
看到失败的尝试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 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>
如我所见，您剪错了第二个形状的一侧。 查看代码片段。
错误的剪裁面：
正确的剪边：
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>