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

太_2_真_人
shape-outside
shape-outside的CSS 属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。 默认情况下,内联内容包围其边距框;
shape-outside提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。例如示例图片:
image
想要实现该样式,我们就需要用到shape-outside,首先我们创造一个简单的html结构:
<html>
<head>
  <style>
    body {
      background: #e0f6ff;
    }
    .wrapper {
      margin: 150px auto;
      width: 500px;
      height: 200px;
      background: aquamarine;
    }

    .left,
    .right {
      width: 20%;
      height: 100%;
    }

    .left {
      float: left;
      background: violet;
    }

    .right {
      float: right;
      background: coral;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

以上页面显示为:
image

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

<body>
  <div class="wrapper">
    <div class="left"></div>
    <p>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a>
      shape-outside的CSS 属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。 默认情况下,内联内容包围其边距框;
      shape-outside提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。shape-outside
      属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容(浮动元素)所包裹的形状。
    </p>
    <div class="right"></div>
  </div>
</body>

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

<body>
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <p>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a>
      shape-outside的CSS 属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。 默认情况下,内联内容包围其边距框;
      shape-outside提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。shape-outside
      属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容(浮动元素)所包裹的形状。
    </p>
  </div>
</body>

结果如图,符合我们的预期:
image

.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;
}

结果如下,可以看到文字已经环绕我们设置形状了
image
但是这么看着,左右两边还是有点别扭,我们想让左右两边也都是我们设置的形状,这时候就需要用到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;
}

效果如图:
image

完整代码

<html>
<head>
  <style>
    body {
      background: #e0f6ff;
    }

    .center {
      text-align: center;
    }

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

    .left,
    .right {
      width: 20%;
      height: 100%;
    }

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

    .right {
      /* background: slateblue; */
      shape-outside: polygon(100% 0, 100% 100%, 0 100%);
      /* shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 50%); */
      /* 配合浮动使之脱离标准文档流 */
      float: right;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <!-- 文字需放在最后 -->
    <p>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a>
      shape-outside的CSS 属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。 默认情况下,内联内容包围其边距框;shape-outside提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。
    </p>
  </div>
</body>
</html>
也可以为clip-path添加动画效果

image
完整代码:

<html>
<head>
  <style>
    body {
      background: #e0f6ff;
    }
    .box {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background: coral;
      clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      animation: 4s trans infinite alternate ease-in-out;
      transform-origin: center;
    }
    @keyframes trans {
      from {
        clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
      }
      to {
        clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
阅读 1.1k

javascript2
已有之事将来必有,易行之事将来必行,太阳底下无新事

已有之事将来必有,易行之事将来必行,太阳底下无新事。

23 声望
0 粉丝
0 条评论

已有之事将来必有,易行之事将来必行,太阳底下无新事。

23 声望
0 粉丝
文章目录
宣传栏