Question

我在网站页面顶部使用clip-path进行渐变。理想情况下，两个角度会合并且不会有问题。

我将顶部放置在可以触摸的位置，并且倾斜的内容中不应包含任何东西。我最初使用top: -120px;，但将其更改为margin-top: -120px;，这看起来不错，并且如果这是最好的方法，则可以保留定位。

问题在于内容像这样被卡在下面；

.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 600px;
    max-height: 600px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    margin: 0;
    padding: 0;
    position: relative;
}

@media only screen and (max-width: 500px) {
.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 400px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    margin: 0;
    padding: 0;
    position: relative;
}
}

.site-hero-content {
    min-width: 100%;
    min-height: 160px;
    background: #FFFFFF;
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -120px;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 500px) {
.site-hero-content {
    min-width: 100%;
    min-height: 160px;
    background: #FFFFFF;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -40px;
    margin: 0;
    padding: 0;
}
}

<div class="site-hero-colour"></div>
<div class="site-hero-content">
   <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1>
</div>

我的想法是改做这样的事情

.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 600px;
    max-height: 600px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
    margin: 0;
    padding: 0;
    position: relative;
}

@media only screen and (max-width: 500px) {
.site-hero-colour {
    min-width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 400px;
    background: linear-gradient(-45deg, #FFFFFF, #000000);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
    margin: 0;
    padding: 0;
    position: relative;
}
}

.site-hero-content {
    min-width: 100%;
    background: pink;
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -120px;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 500px) {
.site-hero-content {
    min-width: 100%;
    background: pink;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    position: relative;
    margin-top: -40px;
    margin: 0;
    padding: 0;
}
}

.new {
  background: blue;
}

<div class="site-hero-colour"></div>
<div class="site-hero-content"></div>
<div class="new"> <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1></div>

这样，一旦删除了该元素的高度，内容就位于下面。我想知道是否有比此方法更好的方法，可以在不使用top的情况下结婚，或者只在此处使用空DIV。我主要是在寻找意见或更好的方法，因为我发现了一些类似的方法。预先感谢。

Answer 1

您的意思是像正方形一样分成两个多边形吗？

尝试如下所示的calc剪切路径属性。

.site-hero-colour {
      min-width: 100%;
      max-width: 100%;
      min-height: 600px;
      max-height: 600px;
      background: linear-gradient(-45deg, #FFFFFF, #000000);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 100px));
      margin: 0;
      padding: 0;
      position: relative;
    }

    @media only screen and (max-width: 500px) {
      .site-hero-colour {
        min-width: 100%;
        max-width: 100%;
        min-height: 400px;
        max-height: 400px;
        background: linear-gradient(-45deg, #FFFFFF, #000000);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
        margin: 0;
        padding: 0;
        position: relative;
      }
    }

    .site-hero-content {
      min-width: 100%;
      background: pink;
      /* clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); */
      clip-path: polygon(0 0, 100% 100px, 100% 100%, 0 100%);
      position: relative;
      margin: 0;
      padding: 0;
      padding-top: 100px;
    }

<div class="site-hero-colour"></div>
  <div class="site-hero-content">
    <h1>This gets cut off. It should sit on top of the white space or be positoned to match up.</h1>
  </div>

CSS剪切路径隐藏元素

1 个答案: