裁剪形状

  1. 使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏

  2. 语法：

    clip-path: circle() | ellipse() | inset() | polygon();

  3. 示例代码

    	<style>
    .clip-box {
        display: flex;
    }
    .clip-box div{
        margin-right: 20px;
    }
    /* 圆形circle（半径 at 圆心坐标） */
    .circle {
        width            : 100px;
        height           : 100px;
        background       : #0cc;
        clip-path        : circle(50% at 50% 50%);
        -webkit-clip-path: circle(50% at 50% 50%);
            
    }
    /* 椭圆形ellipse（长、短轴半径 at 圆心坐标） */
    .ellipse {
        width            : 100px;
        height           : 100px;
        background       : #aaa;
        clip-path        : ellipse(25% 50% at 50% 50%);
        -webkit-clip-path: ellipse(25% 50% at 50% 50%);
    }
    /* 内置矩形inset (上右下左的边距 round 上右下左圆角) */
    .inset {
        width            : 100px;
        height           : 100px;
        background       : #99f;
        clip-path        : inset(10px 20px 30px 10px round 20px 5px 50px 0);
        -webkit-clip-path: inset(10px 20px 30px 10px round 20px 5px 50px 0);
    }
    /* 正三角形 */
    .triangle {
        width            : 100px;
        height           : 87px;
        background       : #c00;
        clip-path        : polygon(0% 100%, 50% 0%, 100% 100%);
        -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    }
    /* 正方形 */
    .square {
        width            : 100px;
        height           : 100px;
        background       : #069;
        clip-path        : polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
</style>
<div class="clip-box">
  <div class="circle"></div>
  <div class="ellipse"></div>
  <div class="inset"></div>
  <div class="triangle"></div>
  <div class="square"></div>
</div>

裁剪路径

  1. 对于复杂的形状，可以采用 SVG 来创建裁剪路径，实现自定义；引用方式和滤镜中的一样，也是使用 url() 函数，但指向的是 SVG 文件中的 clipPath 元素；

    <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

  2. 有两种方式引用 SVG 文件中的形状：

    • 第一种是外部引用，将 SVG 元素放在单独的文件中(只有火狐浏览器支持)；
    • 第二种是行内引用，将 SVG 元素放在当前的 HTML 结构中；
    .url-cross {
  clip-path: url(./shapes.svg#cross);
}
.inline-cross {
  clip-path: url(#cross);
}

  3. 示例

    <style>
    .ex1-container {
        width: 800px;
        height: 400px;
        position: relative;
        background: url('./bg.jpg') no-repeat;
        background-size: cover;
        clip-path: url(#cross);
    }
</style>
<div class="ex1-container"></div>
<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="cross">
            <rect y="110" x="137" width="90" height="90" />
            <rect x="0" y="110" width="90" height="90" />
            <rect x="137" y="0" width="90" height="90" />
            <rect x="0" y="0" width="90" height="90" />
        </clipPath>
    </defs>
</svg>
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 裁剪形状
  2. 2. 裁剪路径