平行四边形布局

效果

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

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

其中:

  • none很好理解,表示就是普通的矩形环绕。
  • <shape-box>(图形盒子)是shape相关布局中的一个名词,比clip-path属性中的<geometry-box>(几何盒子)支持的盒子要少一些,就是CSS2.1中的基本盒模型的4种盒子,分别是margin-boxborder-boxpadding-boxcontent-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布局,相关文章: