shape-outside

• 図形や画像に対して文字の回り込みを制御

float:の指定は必須

例1 : 四角形 contentの外側の縁で回り込み
shape-outside: inset(10%) content-box; 
例2 : 円形50%、x35% y65%の位置で回り込み atでpositionのx、yを指定
shape-outside: circle(50% at 35% 65%); 

図形の設定

• 円 circle(50%)、 circle(50% at 35% 65%)
• 楕円 ellipse(50% 25% at 50% 50%)
• 四角形 inset(20px round 20px) //要素の四隅の内側20pxの位置、角丸20px
• 座標で図形 polygon(40% 0%, 70% 0%, 55% 38%, 90% 40%, 35% 100%, 45% 55%, 20% 50%) //稲妻型

回り込みの設定

• none: 通常の回り込み 形状に沿わない
• margin-box : marginの外側の縁で回り込み margin指定があればその数値の隙間が開く
• border-box : 境界の外側の縁で回り込み
• padding-box : paddingの外側の縁で回り込み
• content-box : contentの外側の縁で回り込み padding-boxより内側

shape-margin

• 切り抜いた図形のフチと、回り込むテキストとの間隔を調整 //shape-outside専用
• marginの場合は、要素のボックス自体の外側全体に余白を作る

グローバル値

• shape-outside: inherit;
• shape-outside: initial;
• shape-outside: revert;
• shape-outside: revert-layer;
• shape-outside: unset;

shape-outside: circle(50%);

HTML

<div class="shape-wrap">
  <div class="shape-circle">circle</div>
  <p>Lorem ........</p>
</div>

CSS

.shape-wrap {
  border: 1px solid #999;
  padding: 1rem;
  margin-inline: auto;
  text-align: justify;
  & .shape-circle {
    width: 6em;
    height: 6em;
    margin: 0.5em 1em 0 0;
    background-color: skyblue;
    border-radius: 50%;
    float: left;
    shape-outside: circle(50%);
    color: white;
    display: grid;
    place-content: center;
  }
}

shape-outside: margin-box; で山の形

HTML

<div class="shape-wrap mountain">
  <div class="shape-left"></div>
  <div class="shape-right"></div>
  <strong>mountain</strong>
  <p>Lorem .....</p>
</div>

CSS

.shape-wrap {
  ....
  & .mountain {
    background-color: skyblue;
    color: #212d3d;
    font-weight: 700;
    & strong {
      background-color: white;
      padding: 0.5em 1em;
      text-align: center;
      display: flex;
      justify-content: center;
      margin-bottom: 1em;
    }
    & .shape-left {
      margin: 0 35% 22% 0;
      border-bottom-right-radius: 100%;
      float: left;
      shape-outside: margin-box;
    }

    & .shape-right {
      margin: 22% 0 0 35%;
      border-bottom-left-radius: 100%;
      float: right;
      shape-outside: margin-box;
    }
  }
}

polygonの稲妻マークを回り込み

HTML

<div class="shape-wrap thunder">
  <div class="polygon"></div>
  <div class="polygon2"></div>
  <p>Lorem ......</p>
</div>

CSS

.thunder {
  & .polygon {
    width: 80px;
    height: 120px;
    background-color: #c9d000;
    float: left;
    clip-path: polygon(40% 0%, 70% 0%, 55% 38%, 100% 40%, 35% 100%, 45% 55%, 0% 50%);
    shape-outside: polygon(40% 0%, 70% 0%, 55% 38%, 100% 40%, 35% 100%, 45% 55%, 0% 50%);
    margin-right: 20px;
  }
  & .polygon2 {
    width: 80px;
    height: 120px;
    background-color: #c9d000;
    float: right;
    clip-path: polygon(40% 0%, 70% 0%, 55% 38%, 100% 40%, 35% 100%, 45% 55%, 0% 50%);
    shape-outside: polygon(40% 0%, 70% 0%, 55% 38%, 100% 40%, 35% 100%, 45% 55%, 0% 50%);
    margin-left: 20px;
  }
}

イメージを回り込み

画像の透明度によって回り込む

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<div class="shape-wrap images">
  <img src="./sam001.png" alt="" />
  <p>Lorem .......</p>
</div>

CSS

.images {
  background-color: aquamarine;
  & img {
    width: 150px;
    float: left;
    shape-outside: circle();
    margin-right: 1rem;
  }
}