我正在嘗試制作文本可以流入的自定義形狀。
從概念上講，就像您想讓 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>uj5u.com熱心網友回復：
如我所見，您剪裁了第二個形狀的錯誤一側。看一下代碼片段。
錯誤的剪輯面：
正確的剪裁面：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432804.html
下一篇：居中SVG路徑