Question

我最近一直热衷于学习更多关于CSS的知识，而CSS一直都是后端的重点。

我目前正尝试使用clip-path放置在彼此上方的两个图像。顶部三角形将上下颠倒，底部三角形将正确向上上升以形成页眉。理想情况下，它们之间要有一个白色的间隙，以将它们稍微分开。

这实际上是我要实现的目标：

当前，我有一个带有两个div的标题：

<body>
  <header class="header">
    <div class="triangle-top"></div>
    <div class="triangle-bottom"></div>
  </header>
</body>

我也有这种样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
  padding: 30px;
}

.header {
  height: 95vh;
{

.triangle-top {
  background-image: linear-gradient(to right bottom, rgba(54, 0, 51, 0.8), rgba(11, 136, 147, 0.8)), url(../img/hero.jpg);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  background-size: cover;
  background-position: top;
  height: 95vh;
}

.triangle-bottom {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  background-image: linear-gradient(to right bottom, rgba(54, 0, 51, 0.8), rgba(11, 136, 147, 0.8)), url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
  height: 95vh;
}

我确实在background-size类中定义了background-cover和.header，但是除非我分别指定，否则什么也不会呈现。目前，我可以看到两个三角形，但是它们之间有一个巨大的空隙，就像这样：

您可以看到第二个三角形的起点就在页面底部。

我在这里想念什么？任何帮助将不胜感激：）

剪辑路径两个彼此叠置的三角形

0 个答案: