Обтекание текста в две колонки вокруг другого блока с контентом
Как сделать обтекание блока в две колонки не только картинки (таких вариантов много через псевдоэлемент и background-image) а html контента.
Визуальзация проблемы: верхний блок в две колонки и свойство shape-outside перестает работать, в нижнем блоке все отлично (рабоатет именно с unset, если поставить column-count: 1 так же не работает)
.wrapper{
position: relative;
margin-bottom: 50px;
}
.content{
width: 100%;
font-size: 20px;
line-height: 25px;
column-count:2;
}
.wrapper--nocolumn .content{
column-count:unset;
}
.shape{
width: 10vw;
height: auto;
background-color: rgba(0,0,0,0.5);
shape-outside: polygon(0 0, 100% 0,100% 100%, 0 100%);
shape-margin: 20px;
float: right;
}<div class="wrapper">
<div class="shape">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
<div class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure quo cupiditate repudiandae voluptas illum est aliquam nostrum minus! Molestias qui sint est perferendis doloremque? Ex eum dolores nemo odit voluptas? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sunt quas similique nihil laudantium reprehenderit tempore asperiores minus quidem et laboriosam maiores aspernatur totam delectus quasi aperiam, sint, repellendus quaerat! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos dolore necessitatibus tempore, ea qui delectus ipsam sequi perferendis, ipsum inventore labore, repellendus adipisci aperiam hic consequatur dolores expedita non quae!
</div>
</div>
<div class="wrapper wrapper--nocolumn">
<div class="shape">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure quo cupiditate repudiandae voluptas illum est aliquam nostrum minus! Molestias qui sint est perferendis doloremque? Ex eum dolores nemo odit voluptas? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sunt quas similique nihil laudantium reprehenderit tempore asperiores minus quidem et laboriosam maiores aspernatur totam delectus quasi aperiam, sint, repellendus quaerat! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos dolore necessitatibus tempore, ea qui delectus ipsam sequi perferendis, ipsum inventore labore, repellendus adipisci aperiam hic consequatur dolores expedita non quae!
</div>
</div>Возможно как то по другому можно реализовать колонки? (разбивать на два дива не вариант, теряется вся суть колонок)