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

头像
太_2_真_人
    231
    发布于
     
    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>
    css3shape-outsideclip-pathvue.jsreact.js
    本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
    javascript2
    已有之事将来必有，易行之事将来必行，太阳底下无新事
    avatar

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

    23 声望
    0 粉丝
    0 条评论
    得票最新
    推荐阅读
    Vue中如何使用debouce防抖函数
    创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 opti...

    太_2_真_人阅读 1k

    CSS 绘制一只思否猫
    欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

    XboxYan赞 46阅读 3.2k评论 14

    封面图
    还在用 JS 做节流吗？CSS 也可以防止按钮重复点击
    举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库

    XboxYan赞 35阅读 2.6k评论 2

    封面图
    CSS transition 小技巧！如何保留 hover 的状态？
    欢迎关注我的公众号：前端侦探通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了 {代码...} 这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是某某书院的首页...

    XboxYan赞 30阅读 3.8k评论 2

    封面图
    CSS 如何设置自动滚动定位的“安全”间距？
    欢迎关注我的公众号：前端侦探介绍两个和滚动定位相关的 CSS 属性：scroll-padding和 scroll-margin在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位 {代码...} 这样，在点击a标签时会自动定位到...

    XboxYan赞 31阅读 2.5k评论 2

    封面图
    2022大前端总结和2023就业分析
    我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点，算是系统性的梳理了一下我自己对前端一整年的总结。年后，在知乎上看到《前端的就业行情怎么样？》，下面都是各种唱衰前端的论调，什么裁员，外包化...

    i5ting赞 27阅读 2.2k评论 4

    封面图
    深入理解React Diff算法
    fiber上的updateQueue经过React的一番计算之后，这个fiber已经有了新的状态，也就是state，对于类组件来说，state是在render函数里被使用的，既然已经得到了新的state，那么当务之急是执行一次render，得到持有新...

    nero赞 31阅读 11.7k评论 3

    avatar

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

    23 声望
    0 粉丝
    宣传栏
    21