css内容不规则显示之shape-outside与clip-path

shape-outside

shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框;
shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。例如示例图片：

想要实现该样式，我们就需要用到 shape-outside，首先我们创造一个简单的html结构：

以上页面显示为：

这时候我们添加要显示的内容：

  

    

    

      官网链接
      shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框;
      shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。shape-outside
      属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。
    
    

  

发现，页面显示并不符合我们的预期，其实这是由于浮动造成的脱离文档标准流造成的。解决该问题我们可以把p标签放到后面：

  

    

    

    

      官网链接
      shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框;
      shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。shape-outside
      属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。
    
  

结果如图，符合我们的预期：

为.leftdiv和.rightdiv，设置shape-outside，使相领的内联文字环绕在我们规定的形状周围。

.left {
  background: violet;
  shape-outside: polygon(100% 0, 0 100%, 0 0);
  /* 配合浮动使之脱离标准文档流 */
  float: left;
}

.right {
  background: coral;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  /* 配合浮动使之脱离标准文档流 */
  float: right;
}

结果如下，可以看到文字已经环绕我们设置形状了

但是这么看着，左右两边还是有点别扭，我们想让左右两边也都是我们设置的形状，这时候就需要用到clip-path了

clip-path

clip-path CSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
这里我们为父元素添加clip-path样式：

.wrapper {
  margin: 150px auto;
  width: 500px;
  height: 200px;
  background: aquamarine;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

去掉左右两边div的背景色：

.left {
  /* background: violet; */
  shape-outside: polygon(100% 0, 0 100%, 0 0);
  /* 配合浮动使之脱离标准文档流 */
  float: left;
}

.right {
  /* background: coral; */
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  /* 配合浮动使之脱离标准文档流 */
  float: right;
}

效果如图：

完整代码

  


  

    

    

    
    

      官网链接
      shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框;shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
    
  

也可以为clip-path添加动画效果

完整代码：