CSS shape-margin与布局效果实例页面

展示

代码

• HTML：

  <h4>shape-margin: 0</h4>
  <div class="container">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  
  <h4>shape-margin: 40px</h4>
  <div class="container shape-margin-1">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  
  <h4>shape-margin: 80px</h4>
  <div class="container shape-margin-2">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  
  <h4>shape-margin: 120px</h4>
  <div class="container shape-margin-3">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>

• CSS：

  .shape {
      float: left;
      width: 150px; height: 200px;
      background-color: #cd0000;
      --birds: url(../images/bird.png);
      shape-outside: var(--birds);
      shape-margin: 0;
      background: var(--birds) no-repeat;
  }
  
  .shape-margin-1 .shape {
      shape-margin: 40px;
  }
  .shape-margin-2 .shape {
      shape-margin: 80px;
  }
  .shape-margin-3 .shape {
      shape-margin: 120px;
  }