平行四边形布局

效果

shape-outside是不规则形状环绕布局的核心，支持的属性值分为如下四大类：

  1. none – 默认值
  2. <shape-box> – 图形盒子。
  3. <basic-shape> – 基本图形函数。
  4. <image> – 图像类。

其中：

  • none很好理解，表示就是普通的矩形环绕。
  • <shape-box>（图形盒子）是shape相关布局中的一个名词，比clip-path属性中的<geometry-box>（几何盒子）支持的盒子要少一些，就是CSS2.1中的基本盒模型的4种盒子，分别是margin-box，border-box，padding-box和content-box。要来指定文字环绕的时候是依照哪个盒子的边缘来计算的。
  • <basic-shape>指的是基本形状函数，和CSS clip-path剪裁属性支持的基本形状函数一模一样。
  • <image>值的是图像类，包括URL链接图片，渐变图像，cross-fade()，element()等。所有这些图像类，CSS3 mask遮罩属性也都支持，本文只会介绍常用的URL链接和渐变图像，其他图片类不介绍，有兴趣可以访问介绍遮罩的这篇文章，有完全展示。

代码

CSS代码：
.shape-left {
    float: left;
    width: 200px; height: 500px;
    shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
    float: right;
    width: 200px; height: 500px;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
    display: block;
    padding: 1px;
    position: relative;
    z-index: 0;
}
.content::before {
    content: '';
    position: absolute;
    background-color: #fff;
    transform: skewX(-22deg);
    left: 50px; right: 50px; top: 0; bottom: 0;
    border: 1px solid #ddd;
    z-index: -1;
}
HTML代码：
<div class="shape-left"></div>
<div class="shape-right"></div>
<content class="content">
   ...内容...
</content>

原理

使用CSS Shapes布局，相关文章：