shape-marginプロパティは、shape-outsideプロパティで指定するフロート要素への回り込みの形状に、マージンを指定する際に使用します。
shape-marginプロパティに負の値を指定することはできません。
div.sample{
width: 300px;
background-color: pink;
}
div.sankaku {
float: left;
shape-outside: polygon(50% 50%, 100% 100%, 0 100%);
clip-path: polygon(50% 50%, 100% 100%, 0 100%);
width: 100px; height: 100px;
background-color: yellowgreen;
shape-margin: 20px;
}
div.daen {
float: right;
shape-outside: ellipse(50px 30px at 50% 50%);
clip-path: ellipse(50px 30px at 50% 50%);
width: 100px; height: 100px;
background-color: orange;
shape-margin: 20px;
}
img.heart {
float: left;
shape-outside: url(images/heart.png);
shape-margin: 20px;
}
<div class="sample"> <div class="sankaku"></div> <p> さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 </p> <div class="daen"></div> <p> だえん、だえん、だえん、だえん、だえん、だえん、だえん。 だえん、だえん、だえん、だえん、だえん、だえん、だえん。 だえん、だえん、だえん、だえん、だえん、だえん、だえん。 </p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/heart.png" class="heart"> <p> はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 </p> </div>
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。