[css] 第165天 你有用过clip-path吗？说说你对它的理解和它都有哪些运用场景？

[haizhilin]

第165天 你有用过clip-path吗？说说你对它的理解和它都有哪些运用场景？

[Qin]

有用过但是仅限于很基础的一些图形的绘制还有制作一些透视图，在我看来这是一个很强大的属性但是原谅我平庸的脑袋想不出什么有新意的想法，我接触过的应用场景大概就是制作透视图还有头像之类的
不过可以有个很不错的clip-path网站，我一般直接用这个来做clip-path

[tyounami]

• clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域

• 它的值可以为以下几种

  • : 用 表示剪切元素的路径
  • : 一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框
  • : 如果同 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）
  • none: 不创建的剪切路径

• demo

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .demo {
        margin: 15px auto;
        width: 400px;
        height: 400px;
        background: #000000;
    }

    .clip {
        /* clip-path: url(#cross); */
        /* clip-path: circle(40%); */
        clip-path: view-box;
    }
</style>
<div class="demo clip"></div>
<svg height="0" width="0">
    <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>

[forever-z-133]

裁剪嘛，比三角更酷炫的内凹三角，菱形或蜂巢形列表，带背景图的三角，等等，都能更容易实现了。

[zhangzhongming]

为了满足一些设计师们奇怪的形状设计而出现的一个挺好用的属性