css实现图片多种裁剪效果-html代码-BFW代码库

css实现图片多种裁剪效果

代码语言：html

代码描述：css实现图片多种裁剪效果，椭圆、五角星、十字架、x形状等，几行css解决

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  color: salmon;
  text-align: center;
  margin: 3rem auto;
  width: 80%;
}

h2 {
  color: grey;
  text-align: left;
  margin: 0;
}

.images {
  margin: 1em auto;
}
figcaption {
  text-align: right;
  color: darkgrey;
  margin: 0 0 0 auto;
}
.clip-img-one {
  -webkit-clip-path: circle(50% at 50%);
  clip-path: circle(50% at 50%);
}
.clip-img-two {
  clip-path: polygon(
    10% 25%,
    35% 25%,
    35% 0%,
    65% 0%,
    65% 25%,
    90% 25%,
    90% 50%,
    65% 50%,
    65% 100%,
    35% 100%,
    35% 50%,
    10% 50%
  );
}

.clip-img-three {
  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%
  );
}

.clip-img-four {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
</style>

</head>
<body translate="no">
<h1>Clipping Images</h1>
<h2>Example #1</h2>
<figure>

        &l.........完整代码请登录后点击上方下载按钮下载查看