【发布时间】：2021-07-08 23:09:18
【问题描述】：
我有一个意想不到的问题。
我现在喜欢使用伪元素，因为我知道它们，并且我正在使用它们来制作倾斜的页眉和页脚，而不会使其中的文本倾斜。标题看起来很棒，功能也符合我的预期。这是我想要/期望的：
然而，这就是实际发生的事情：
有谁知道是否有办法只删除影响页面高度的伪元素？或者，实现上述图片的最佳解决方案是什么？
注意：使用脚本是可能的，因为我还有其他需要使用 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>【问题讨论】：
-
请@vanowm 为您提供帮助
-
溢出：隐藏到 .angled-bottom ?
标签： html css pseudo-element