css3 clip-path属性

1.clip-path 属性可以通过定义裁剪区域来决定目标元素哪个区域可见，哪个区域不可见，也就是只有在闭合路径内的部分才显示，区域以外的部分就不显示。可以通过url 引入内嵌的或者外置的SVG，又或者是直接用自带的形状为clip-path 属性指定路径。 Clip-path 属性是clip属性的替代者，也可以说是click 属性的升级版。

2.基本语法：

/* Keyword values */
clip-path: none;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* Image values */
clip-path: url(resources.svg#c1);
clip-path: linear-gradient(blue, transparent);
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

3.实现原理：Clip-path 实现裁剪的原理也非常简单，clip-path 属性为我们提供了一系列的坐标来创建路径也就是我们常常说的X，Y。当创建完一个闭合的路径时，位于路径内部的区域就可见，而路径外的区域就不可见。这样就实现了裁剪效果。我们可以用这个属性来创建各种图形，如圆形，多边形，三角形，椭圆形等等，没有你做不到，就怕你没想到。

4.案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box {
        width: 300px;
        height: 300px;
    }

    .sanjiao {
        width: 100%;
        height: 100%;
        background: turquoise;
        clip-path: polygon(100px 20px, 0px 100px, 200px 100px)
    }

    .img {
        width: 500px;
        height: 500px;
    }

    .img img {
        width: 100%;
        height: 100%;
        /* clip-path: circle() */
        /* clip-path: stroke-box; */
        /* 三角形 */
        /*-webkit-clip-path: polygon(0px 10px, 20px 0px, 20px 20px);*/
        /* -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); */
        /* clip-path: polygon(50% 0, 0 80%, 100% 80%); */
        /* 对话框裁剪 */
        /* -webkit-clip-path: polygon(0% 0%,30% 0%,30% 40%,23% 40%,25% 50%,15% 40%,0% 40%); */
        /* clip-path: polygon(0% 0%,30% 0%,30% 40%,23% 40%,25% 50%,15% 40%,0% 40%); */
        /* 五角星 */
        /* -webkit-clip-path: polygon(50% 0%, 65% 33%, 100% 33%, 80% 60%, 90% 100%, 50% 75%, 10% 100%,20% 60%,0 33%,35% 33%); */
        /* clip-path: polygon(50% 0%, 65% 33%, 100% 33%, 80% 60%, 90% 100%, 50% 75%, 10% 100%,20% 60%,0 33%,35% 33%); */
        /* 圆形 */
        /* -webkit-clip-path: circle(30% at 50% 50%); */
        /*-webkit-clip-path: circle(80px at 150px 83px);*/
        /* clip-path: circle(30% at 50% 50%); */
        /* 椭圆 */
        /* -webkit-clip-path: ellipse(30% at 50% 50%); */
        /*-webkit-clip-path: ellipse(80px at 150px 83px);*/
        /* clip-path: ellipse(30% 20% at 50% 50%); */
        /* 叶子 */
        /* -webkit-clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%); */
        /* clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%); */
        /* inset();它的基本语法如下：
        inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */
        /* 简单的变形动画 */
        /* clip-path: polygon(50% 0%, 65% 0%, 100% 0%, 100% 60%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0 33%, 0% 0%); */
        transition: all 0.5s;
    }

    .img img:hover {
        transform: rotate(360deg);
        clip-path: polygon(50% 0%, 65% 33%, 100% 33%, 80% 60%, 90% 100%, 50% 75%, 10% 100%, 20% 60%, 0 33%, 35% 33%);
    }

    .svg {
        width: 880px;
        height: 450px;
        margin-top: 80px;
    }

    .svg img {
        width: 100%;
        height: 100%;
        /* clip-path: url(#svgPath); */
        /* clip-path: url(#svgTextPath); */
        clip-path: url(#svgmorePath);
    }
   
    .svgtiaoxing {
        margin-top:80px;
        -webkit-clip-path: url(#theSVGPath);
        clip-path: url(#theSVGPath);
    }
</style>

<body>
    <div class="box">
        <div class="sanjiao"></div>
    </div>
    <div class="img">
        <img src="./1.jpg" alt="">
    </div>

    <!-- CSS和SVG中的剪切——clip-path属性和<clipPath>元素 -->
    <div class="svg">
        <img src="./1.jpg" alt="">
    </div>
   <!-- 不规则形状 -->
    <svg height="0" width="0">
        <defs>
            <clipPath id="svgPath">
                <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
                        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
                        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"></path>
            </clipPath>
        </defs>
    </svg>

    <!-- 文字 -->
    <svg height="0" width="0">
        <defs>
            <clipPath id="svgTextPath">
                <text x="0" y="300" textLength="800px" lengthAdjust="spacing" font-family="Vollkorn" font-size="180px" font-weight="700"
                    font-style="italic"> Blossom </text>
            </clipPath>
        </defs>
    </svg>
    <!-- 多个圆形图形 -->
    <svg height="0" width="0">
        <defs>
            <clipPath id="svgmorePath">
                <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="346.915" cy="255.763" r="43.644"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="255.39" cy="82.882" r="35.17"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="328.695" cy="157.034" r="25.424"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="594.797" cy="360.424" r="121.187"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="470.008" cy="223.771" r="31.992"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="299.525" cy="400.762" r="64.407"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="634.627" cy="183.305" r="92.373"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="136.746" cy="172.712" r="106.356"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="91.831" cy="416.779" r="36.017"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="125.305" cy="335" r="25.424"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="192.424" cy="421.271" r="20.509"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="184.847" cy="362.543" r="18.22"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="436.568" cy="385.602" r="72.635"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="345.644" cy="90.085" r="23.729"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="534.627" cy="85" r="42.373"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="426.305" cy="12.017" r="83.898"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="277.458" cy="314.694" r="22.068"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="413.229" cy="195.381" r="22.669"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="277.848" cy="185" r="16.949"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="493.102" cy="158.729" r="19.492"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="424.517" cy="290.873" r="24.517"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="71.067" cy="348.56" r="49.152"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="737.221" cy="62.915" r="50.898"></circle>
                <circle stroke="#000000" stroke-miterlimit="10" cx="740" cy="430" r="50"></circle>
            </clipPath>
        </defs>
    </svg>
    <!-- 条形图片 -->
    <svg class="svgtiaoxing" height="500" width="800">
        <image xlink:href="./1.jpg" x="0" y="0" width="800" height="500"
        />
        <defs>
            <clipPath id="theSVGPath">
                <rect x="0" y="0" stroke="#000000" stroke-miterlimit="10" width="108" height="500" />
                <rect x="121.5" y="25.5" stroke="#000000" stroke-miterlimit="10" width="55" height="455" />
                <rect x="192.5" y="9.5" stroke="#000000" stroke-miterlimit="10" width="60" height="484" />
                <rect x="271.5" y="44.5" stroke="#000000" stroke-miterlimit="10" width="63" height="416" />
                <rect x="349.5" y="25.5" stroke="#000000" stroke-miterlimit="10" width="208" height="447" />
                <rect x="574.5" y="44.5" stroke="#000000" stroke-miterlimit="10" width="60" height="446" />
                <rect x="644.5" y="9.5" stroke="#000000" stroke-miterlimit="10" width="68" height="471" />
                <rect x="736.5" y="18.5" stroke="#000000" stroke-miterlimit="10" width="49" height="462" />
            </clipPath>
        </defs>
    </svg>
</body>

</html>

5.CSS和SVG中的剪切——clip-path属性和<clipPath>元素:

上面的案例中已经有案例了，可以试下

猜你喜欢