, поэтому я пытаюсь переместить полигон, созданный с использованием свойства shape-outside css3, вместе с элементом изображения, который задаю относительную позицию.Тем не менее, кажется, что многоугольник не движется вместе с элементом, а просто остается в исходном положении элемента.
Я попытался только что создать многоугольник с помощью svg, создать путь обрезки с помощью css и попытался позиционировать сам многоугольник, но пока что безуспешно.проблема отображается в этом коде .
<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 бэр вправо вместе с изображением.