html - 使用 HTML 和 CSS 剪切形状

Question

<分区>

Answer 1

您正在寻找的是 image clipping .网上有很多文章介绍了如何使用 CSS ( here is one )。这个过程非常简单，因为它只需要一行 CSS 就可以完成这项任务。您需要使用 clip-path 才能完成此操作，我强烈建议您阅读 the documentation在上面。

构建 clip-path 可能很困难，具体取决于您的目标，但是 Clippy是一个非常有用的在线剪辑路径助手。但是，根据您提供的图像，以下将起作用:

html, body {
  margin: 0;
  height: 100%;
  background-color: #124;
  background-image: linear-gradient(to right, #111, #124);
  background-image: -webkit-linear-gradient(to right, #111, #124);
}
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2940219/GIF_Koi_Pond.gif');
  background-size: cover;
  background-position: center;
  clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
}
.main-content {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding: 15px;
}
.main-content h1 {
  width: 250px;
  margin: 0;
}
.main-content a {
  color: #fff;
  background-color: #3a7;
  text-decoration: none;
  padding: 5px 25px;
  width: 150px;
  text-align: center;
}

<div class="background-image"></div>
<div class="main-content">
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, L lorem ipsum dolor sit amet.</p>
  <a href="#" class="button button--primary">View our services</a>
</div>

您最感兴趣的部分是:

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

此外，不要忘记 clip-path 有一个需要考虑的 -webkit 版本。

clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);
-webkit-clip-path: polygon(56% 0, 78% 50%, 56% 100%, 31% 100%, 52% 50%, 28% 0);

另一件要记住的事情是，当您将 clip-path 应用于诸如 div 之类的元素时，您不仅仅是在剪切 background-image ，而是剪切整个元素。