CSS渐变下的Shapes布局效果实例页面

展示

代码

• HTML：

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

• CSS：

  .shape {
      float: left;
      width: 150px; height: 120px;
      --gradient: linear-gradient(to right bottom, #cd0000, transparent 50%, transparent 90%, #cd0000);
      shape-outside: var(--gradient);
      background: var(--gradient);
  }