footer文本/背景不显示求助：如何实现灰色多边形背景的footer

问题根源分析 #

方案一核心问题：选择器不匹配 #

HTML中使用<footer>标签，但CSS定义的是.footer类选择器，两者未关联，导致样式完全无法作用到目标元素上。

方案二核心问题：HTML语法错误 #

• 标签嵌套错误：<h4 span class="text-of-footer-main">是无效写法，<span>应作为<h4>的子元素存在
• 闭合标签位置错误：</span>放在</h4>之后，破坏DOM结构，导致浏览器无法正常解析渲染

修复后的完整实现代码 #

HTML代码 #

<footer class="footer">
    <h4>
        <span class="text-of-footer-main">Engman Online Photography Institute</span>
        <span class="text-of-footer-sub">is where learning happens</span>
    </h4>
    <p>Copyright &copy;2023 Engman Online Photography Institute All Rights Reserved</p>
</footer>

CSS代码 #

.footer {
    width: 100%;
    background-color: rgb(88, 90, 83);
    height: 450px;
    clip-path: polygon(0 15%, 100% 40%, 100% 100%, 0 100%);
    color: aliceblue;
    text-align: center;
    padding-top: 120px; /* 避免顶部文本被多边形裁剪，可根据需求调整 */
    box-sizing: border-box; /* 确保内边距不影响元素总宽度 */
}

.text-of-footer-main {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.text-of-footer-sub {
    display: block;
    font-size: 1rem;
    opacity: 0.9;
}

关键修复说明 #

1. 选择器关联：给<footer>标签添加class="footer"，确保CSS样式正确绑定到目标元素
2. DOM结构修复：将<span>正确嵌套在<h4>内部，保证HTML语法合法
3. 文本可见性优化：添加padding-top将文本下移，避免被clip-path裁剪掉顶部区域
4. 布局稳定性：使用box-sizing: border-box防止内边距撑开元素宽度，保证100%宽度的准确性

内容的提问来源于stack exchange，提问作者m.najder