shape-outsideプロパティは、フロート要素への回り込みの形状を指定する際に使用します。
一般的には、テキストを円、楕円、多角形のような図形の外側に回り込ませるなどのスタイルが想定されます。
shape-outsideプロパティは、フロート要素に対して有効となります。
shape-outsideプロパティを指定する要素には、同時にfloatプロパティの値に left または right を指定する必要があります。
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;
}
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;
}
img.heart {
float: left;
shape-outside: url(images/heart.png);
}
<h5>shape-outsideプロパティの指定がある場合</h5> <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> <h5>shape-outsideプロパティの指定がない場合</h5> <div class="sample"> <div class="sankaku" style="shape-outside: none;"></div> <p> さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 </p> <div class="daen" style="shape-outside: none;"></div> <p> だえん、だえん、だえん、だえん、だえん、だえん、だえん。 だえん、だえん、だえん、だえん、だえん、だえん、だえん。 だえん、だえん、だえん、だえん、だえん、だえん、だえん。 </p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/heart.png" class="heart" style="shape-outside: none;"> <p> はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 </p> </div>
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。