阻止伪元素扩展 window 的高度

Question

我有一个意想不到的问题。

我喜欢使用伪元素，因为我已经知道它们了，我正在使用它们来制作倾斜的 header 和页脚，而不会倾斜其中的文本。 header 看起来很棒，功能也如我所料。这是我想要/期望的：

然而，实际情况是这样的：

任何人都知道是否有办法只删除影响页面高度的伪元素？或者，实现上图的最佳解决方案是什么？

注意：使用脚本是可能的，因为我还有其他需要使用 JS 的东西，但如果可以的话，我宁愿不要将它用于像这样基于外观的东西。我觉得我可以改用多边形，但我认为倾斜更好，因为我可以使角度与网页中的其他元素保持一致，这首先是这个努力的重点。如果您需要一个地方开始修补，这里有一些相关代码：

:root {
  --dark-purple:    hsla(274, 64%, 10%,  1);
  --med-purple:     hsla(274, 45%, 20%,  1);
  --light-purple:   hsla(274, 45%, 35%,  1);
  --lighter-purple: hsla(274, 45%, 40%,  1);
  --light:          hsla(274, 5%,  95%,  1);
  --grey:           hsla(274, 5%,  55%,  1);
  --dark:           hsla(274, 5%,  5%,   1);
  --vertical-grad:      linear-gradient(180deg, #ff8f3e, #cf132c, #420d6e);
  --vertical-grad-r:    linear-gradient(0deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad:    linear-gradient(90deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad-r:  linear-gradient(270deg, #ff8f3e, #cf132c, #420d6e);
}

body {
  margin: 0;
  z-index: -1;
  margin: 0;
  position: relative;
  background-color: var(--dark-purple);
  font-family: sans-serif;
  font-size: 13pt;
  color: var(--light);
}

.angled-top::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(-5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-top {
  display: flex;
  padding: 2rem 4rem 9.5vw 4rem;
  justify-content: center;
  position: relative;
}

.angled-bottom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-bottom {
  display: flex;
  padding: 9.5vw 4rem 2rem 4rem;
  justify-content: space-around;
  position: relative;
}

.footer--column:nth-child(2) { transform: translate(0px, -2.5vw); }
.footer--column:nth-child(3) { transform: translate(0px, -5vw); }

    <header>
      <div class="angled-top">
        [Header stuff here]
      </div>
    </header>
    
    <main>
      <div style="height: 70vh">... Simulate some large amount of content ...</div>
    </main>

    <footer>
      <div class="angled-bottom">
        <div class="footer--column">
          <h3>Sitemap</h3>

        </div>
        <div class="footer--column">
          <h3>Connect</h3>

        </div>
        <div class="footer--column">
          <h3>Recommended Sites</h3>

        </div>
      </div>
    </footer>

Answer 1

只需将 overflow: hidden 添加到您的 .angled-bottom。我宁愿选择“包含：内容”，但 Safari 不完全支持它。

我还删除了所述元素的底部填充。

:root {
  --dark-purple:    hsla(274, 64%, 10%,  1);
  --med-purple:     hsla(274, 45%, 20%,  1);
  --light-purple:   hsla(274, 45%, 35%,  1);
  --lighter-purple: hsla(274, 45%, 40%,  1);
  --light:          hsla(274, 5%,  95%,  1);
  --grey:           hsla(274, 5%,  55%,  1);
  --dark:           hsla(274, 5%,  5%,   1);
  --vertical-grad:      linear-gradient(180deg, #ff8f3e, #cf132c, #420d6e);
  --vertical-grad-r:    linear-gradient(0deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad:    linear-gradient(90deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad-r:  linear-gradient(270deg, #ff8f3e, #cf132c, #420d6e);
}

body {
  margin: 0;
  z-index: -1;
  margin: 0;
  position: relative;
  background-color: var(--dark-purple);
  font-family: sans-serif;
  font-size: 13pt;
  color: var(--light);
}

.angled-top::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(-5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-top {
  display: flex;
  padding: 2rem 4rem 9.5vw 4rem;
  justify-content: center;
  position: relative;  
}

.angled-bottom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-bottom {
  display: flex;
  padding: 9.5vw 4rem 2rem 4rem;
  justify-content: space-around;
  position: relative;
  
    /* NEW */
  overflow: hidden;
  padding-bottom: 0;
}

.footer--column:nth-child(2) { transform: translate(0px, -2.5vw); }
.footer--column:nth-child(3) { transform: translate(0px, -5vw); }

<header>
      <div class="angled-top">
        [Header stuff here]
      </div>
    </header>
    
    <main>
      <div style="height: 70vh">... Simulate some large amount of content ...</div>
    </main>

    <footer>
      <div class="angled-bottom">
        <div class="footer--column">
          <h3>Sitemap</h3>

        </div>
        <div class="footer--column">
          <h3>Connect</h3>

        </div>
        <div class="footer--column">
          <h3>Recommended Sites</h3>

        </div>
      </div>
    </footer>

Answer 2

您可以在 .angled-bottom 上设置 overflow: hidden;。也许用伪元素玩高度。

:root {
  --dark-purple:    hsla(274, 64%, 10%,  1);
  --med-purple:     hsla(274, 45%, 20%,  1);
  --light-purple:   hsla(274, 45%, 35%,  1);
  --lighter-purple: hsla(274, 45%, 40%,  1);
  --light:          hsla(274, 5%,  95%,  1);
  --grey:           hsla(274, 5%,  55%,  1);
  --dark:           hsla(274, 5%,  5%,   1);
  --vertical-grad:      linear-gradient(180deg, #ff8f3e, #cf132c, #420d6e);
  --vertical-grad-r:    linear-gradient(0deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad:    linear-gradient(90deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad-r:  linear-gradient(270deg, #ff8f3e, #cf132c, #420d6e);
}

body {
  margin: 0;
  z-index: -1;
  margin: 0;
  position: relative;
  background-color: var(--dark-purple);
  font-family: sans-serif;
  font-size: 13pt;
  color: var(--light);
}

.angled-top::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(-5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-top {
  display: flex;
  padding: 2rem 4rem 9.5vw 4rem;
  justify-content: center;
  position: relative;
}

.angled-bottom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; 
  /* changed */
  bottom: 10vh;
  left: 0;
  transform: skewY(-5deg) translateY(5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-bottom {
  display: flex;
  padding: 9.5vw 4rem 2rem 4rem;
  justify-content: space-around;
  position: relative;

  /* added */
  overflow: hidden;
}

.footer--column:nth-child(2) { transform: translate(0px, -2.5vw); }
.footer--column:nth-child(3) { transform: translate(0px, -5vw); }

<header>
      <div class="angled-top">
        [Header stuff here]
      </div>
    </header>
    
    <main>
      <div style="height: 70vh">... Simulate some large amount of content ...</div>
    </main>

    <footer>
      <div class="angled-bottom">
        <div class="footer--column">
          <h3>Sitemap</h3>

        </div>
        <div class="footer--column">
          <h3>Connect</h3>

        </div>
        <div class="footer--column">
          <h3>Recommended Sites</h3>

        </div>
      </div>
    </footer>

阻止伪元素扩展 window 的高度

Stop pseudo elements from extending height of window

html

css

pseudo-element