clip-path

发现了一个有意思的CSS属性

属性详情
clip-path生成器

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

/* 我没有接触过svg 所以只写了几个我觉得能常用的属性*/
clip-path: circle( 50% at 50% 50%);     /* 剪裁成 【圆形】 第一个参数是 圆半径 at 圆心坐标*/
clip-path: ellipse( 50% 25% at 50% 50%);    /*剪裁成 【椭圆】 第一个参数是 横向半径 第二个是 纵向半径 at 圆心坐标  当半径一致 相当于圆*/
clip-path: polygon( 50% 0,0 100%,100% 100%);    /* 剪裁成任意形状 后跟每个点坐标  这是个三角形 注意点连接的顺序！ 如下：*/

可以实现的效果

我感觉比伪类方便 可以代替圆角之类的 也可以结合动画之类的

<style>
.clipPath{
    width:150px;
    height: 150px;
    background-image: url('/images/avatar.jpg'); 
    background-size:100% 100%;
    display:inline-block;  
}
.clipPath.dv1{
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.clipPath.dv2{
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.clipPath.dv3{
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.clipPath.dv4{
    /* clip-path: ellipse(100% 100% at 0% 0%); 效果一致*/
    clip-path: circle(100% at 0% 0%);
}
.clipPath.dv5{
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}
</style>
<div class="clipPath dv1"></div>
<div class="clipPath dv2"></div>
<div class="clipPath dv3"></div>
<div class="clipPath dv4"></div>
<div class="clipPath dv5"></div>