所以我试图移动使用css3的shape-outside属性创建的多边形以及我给出相对位置的图像元素。但是，多边形似乎并没有随元素一起移动，而是仅停留在元素的原始位置。
我尝试刚刚创建使用SVG的多边形，使用CSS并试图位置多边形本身创建的夹路径，但至今没有运气。问题显示在此codepen中。
<style>
section {
width:95%;
margin-left: auto;
margin-right: auto;
}
section img {
width: 50rem;
float: right;
position: relative;
left: 6rem;
z-index: -1;
shape-outside: polygon(63.5% 21.85%, 67.4% -0.2%, 77% 13.35%, 87.5% 16.8%, 94.65% 44.95%, 95.25% 88.45%, 37.15% 95.75%, 3.75% 75.1%, 2.25% 65.2%, 47.5% 44.35%, 45.5% 16.4%);
-webkit-shape-outside: polygon(63.5% 21.85%, 67.4% -0.2%, 77% 13.35%, 87.5% 16.8%, 94.65% 44.95%, 95.25% 88.45%, 37.15% 95.75%, 3.75% 75.1%, 2.25% 65.2%, 47.5% 44.35%, 45.5% 16.4%);
}
</style>
<body>
<section>
<img src="https://www.warrenphotographic.co.uk/photography/bigs/14195-Cute-cat-and-kitten-white-background.jpg" alt="" >
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi necessitatibus illum tempore aliquid possimus ea maiores eligendi, id distinctio! Quas, aut vel. Culpa consectetur labore in voluptatum repudiandae cum officiis! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eveniet aperiam maxime, maiores, vel voluptatum quaerat accusamus temporibus, fuga omnis ullam eligendi. Eligendi nulla eaque, maiores earum voluptas sunt excepturi? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error hic iusto sit, animi quaerat commodi sequi accusamus beatae illum expedita quisquam cupiditate amet magnam. Odit assumenda eaque aliquid mollitia omnis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veniam numquam adipisci eius quisquam sed! Nulla harum omnis quis blanditiis? Inventore, possimus similique veniam optio perferendis perspiciatis. Modi, accusamus aperiam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, iure laborum eum nisi commodi ipsa architecto esse itaque cumque quis dolorem perferendis iusto harum, placeat nam totam repudiandae alias minima? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus blanditiis quis consequatur cumque minus fugiat cum similique excepturi sunt placeat aspernatur expedita, facere commodi officia deleniti praesentium dolores voluptas doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maxime repellat id magnam dicta rem optio ex soluta odit! Ducimus, expedita et iusto mollitia in delectus officia asperiores ratione nulla. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat quibusdam error earum. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam.Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam.</p>
</section>
</body>
我想知道多边形是否随图像一起移动，是否有解决此问题的方法。所以在这种情况下，它会围绕6 REM向右移动，与图像一起。
答案 0 :(得分：0)
使用负值代替边距，而不是使用left。
我在悬停值上添加了一个更改，以使其更明显可见
section {
width: 95%;
margin-left: auto;
margin-right: auto;
}
section img {
width: 50rem;
float: right;
position: relative;
margin-right: -6rem;
z-index: -100;
shape-outside: polygon(63.5% 21.85%, 67.4% -0.2%, 77% 13.35%, 87.5% 16.8%, 94.65% 44.95%, 95.25% 88.45%, 37.15% 95.75%, 3.75% 75.1%, 2.25% 65.2%, 47.5% 44.35%, 45.5% 16.4%);
-webkit-shape-outside: polygon(63.5% 21.85%, 67.4% -0.2%, 77% 13.35%, 87.5% 16.8%, 94.65% 44.95%, 95.25% 88.45%, 37.15% 95.75%, 3.75% 75.1%, 2.25% 65.2%, 47.5% 44.35%, 45.5% 16.4%);
transition: margin 2s;
}
section:hover img {
margin-right: -20rem;
}<section>
<img src="https://www.warrenphotographic.co.uk/photography/bigs/14195-Cute-cat-and-kitten-white-background.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi necessitatibus illum tempore aliquid possimus ea maiores eligendi, id distinctio! Quas, aut vel. Culpa consectetur labore in voluptatum repudiandae cum officiis! Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Modi eveniet aperiam maxime, maiores, vel voluptatum quaerat accusamus temporibus, fuga omnis ullam eligendi. Eligendi nulla eaque, maiores earum voluptas sunt excepturi? Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Error hic iusto sit, animi quaerat commodi sequi accusamus beatae illum expedita quisquam cupiditate amet magnam. Odit assumenda eaque aliquid mollitia omnis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores veniam numquam adipisci
eius quisquam sed! Nulla harum omnis quis blanditiis? Inventore, possimus similique veniam optio perferendis perspiciatis. Modi, accusamus aperiam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, iure laborum eum nisi commodi ipsa
architecto esse itaque cumque quis dolorem perferendis iusto harum, placeat nam totam repudiandae alias minima? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus blanditiis quis consequatur cumque minus fugiat cum similique excepturi
sunt placeat aspernatur expedita, facere commodi officia deleniti praesentium dolores voluptas doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam maxime repellat id magnam dicta rem optio ex soluta odit! Ducimus, expedita et
iusto mollitia in delectus officia asperiores ratione nulla. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat quibusdam error earum. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus
error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque
consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis
vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum
facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis
libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur
aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis
a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae
eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem,
blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit
amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam.Aliquam sapiente autem ab perspiciatis vitae
ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis
nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero
ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam
inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab
assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos
error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem,
blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam. Aliquam sapiente autem ab perspiciatis vitae ipsum ea iusto? Sequi autem voluptatem, a libero necessitatibus error provident ad.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod et perferendis a ab assumenda adipisci consequuntur consectetur architecto voluptatem! Dolorum facilis nam itaque natus blanditiis perspiciatis, minus incidunt doloremque consequuntur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique optio beatae eos error ea unde, explicabo alias voluptates excepturi assumenda placeat quis libero ipsum, officiis, consectetur repellendus laborum amet rem. Lorem ipsum, dolor sit
amet consectetur adipisicing elit. Quaerat sequi quas ad, nisi exercitationem dolorem, blanditiis nihil nobis incidunt nemo omnis recusandae architecto pariatur aliquam inventore est eveniet esse. Aperiam.</p>
</section>