时间戳

首页 > 解决方案 > CSS Clip Path 隐藏元素

css - CSS Clip Path 隐藏元素

问题描述

我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 的情况下将它们结婚。我主要是在寻找意见或更好的方法，因为我发现了一些可行的方法。提前致谢。

标签： css

解决方案

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

尝试如下所示的 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>

推荐阅读