css - 如何通过CSS做这个 Angular 背景？

Question

我怎样才能得到这样的东西？你能帮帮我吗？

Answer 1

您可以使用 CSS 实现这一点。

想法是有 3 个集团:

1. 一个容器(将包含图像作为背景)
2. 将旋转以模拟三 Angular 形的空 block
3. 将包含文本的 div

想法是旋转空 block 以获得所需的 Angular 。为了创建“三 Angular 形”效果，我们在容器上使用 overflow:hidden 作为 mask (尽管旋转，您还需要使旋转 block 大于 hte 容器以覆盖它)。

然后定义三 Angular 形和内容 block 位置和 z-index 以叠加它们。

注意:您不必将图像作为容器 block 的背景。您还可以使用 img 标签显示并再次使用 z-index 将 3 个 block 显示在彼此之上。

.container,
.rotated-block {
  display:block;
}

.container {
  background: #000000;
  width: 600px;
  height: 350px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.rotated-block {
  position: absolute;
  zi-index: 1;
  width: 100%;
  min-height: 150%;
  background: #FFFFFF;
  transform: rotate(-20deg);
  left: -40%;
  top: -7%;
}

.content {
  position: relative;
  z-index: 3;
  top: 35%;
  left: 10%;
}

<div class="container">
    <div class="content">
        <p>Purly made with HTML & CSS</p>
     </div>
  <div class="rotated-block"></div>
</div>