文字围绕鹦鹉轮廓的布局实现实例页面

展示

代码

• HTML：

  <div class="container">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
                  

• CSS：

  .shape {
      float: left;
      width: 150px; height: 200px;
      background-color: currentColor;
      shape-outside: url(../images/bird.png);
      -webkit-mask: url(../images/bird.png) no-repeat;
      mask: url(../images/bird.png) no-repeat;
      color: #cd0000;
  }