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://www.htmq.com/wp-content/themes/htmq/htmq-images/heart.png" class="heart"> <p> はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 </p> </div>
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。