Question

我试图在标题部分之后添加一个三角形伪元素，这是一个示例：

不幸的是，当我在HTML和CSS中添加了一个伪元素时，它没有显示在屏幕上，似乎被某些东西掩盖了。

这是我现在拥有的：

您能告诉我我在哪里犯了错误以及如何解决吗？（我正在使用SASS）

我的代码：

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">
    <title>CSS-Layouts</title>
</head>
<body>
    <header>
        <div class="container">
            <div class="navbar-wrapper">
                <a class="logo" href="index.html">lorem & ipsum</a>
                <ul class="navigation">
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Signup</a></li>
                </ul>    
            </div>
            <div class="headerSection-wrapper">
                <h1>lorem <span>&</span> ipsum</h1>
                <p>An Original Brand Since 1965</p>
                <div class="menu-wrapper">
                    <button class="menu-button" type="button">Careers</button>
                    <button class="menu-button" type="button">About</button>
                    <button class="menu-button" type="button">Show More</button>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div>
            <div class="text-background">
                <div class="text-wrapper">
                    <div class="left-text">
                        <p>
                            Lorem ipsum, dolor sit amet consectetur. 
                            <br>
                            Aenean <strong>commodo ligula</strong> reget dolor
                        </p>
                    </div>
                    <div class="right-text">
                        <p>
                            Et sit ut vero et at justo invidunt lorem et. 
                            Sea diam eos diam lorem eos et kasd sed at, et diam gubergren sea ea, 
                            nonumy sit dolor est stet.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

style.scss

* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    font-family: 'Open Sans', sans-serif; 
}   

    header {
        width: 100%;
        height: 100vh;
        background: #6f6f6f url("../img/sample2.jpg") center center no-repeat;
        object-fit: cover;
        background-size: cover;

        .container {

            .navbar-wrapper {
                display: flex;
                justify-content: space-between;
                flex-flow: row wrap;

                .logo {
                    padding: 40px;
                    text-transform: uppercase;
                    color: #FFFFFF;
                    text-decoration: none;
                    letter-spacing: 0.2em;
                }

                .navigation {
                    list-style: none;
                    display: flex;
                    flex-flow: row wrap;
                    justify-content: flex-end;

                    a {
                        text-decoration: none;
                        display: block;
                        color: #FFFFFF;
                        padding: 40px;
                        cursor: pointer;

                    }
                }
            }
            .headerSection-wrapper {
                text-align: center;
                margin-top: 8%;

                h1 {
                    text-transform: uppercase;
                    font-size: 50px;
                    font-weight: 400;
                    letter-spacing: 0.15em;
                    color: #FFFFFF;

                    span {
                        font-size: 85px;
                    }
                }
                p {
                    color: #fff;
                    margin-bottom: 165px;
                }
                .menu-wrapper {
                    display: flex;
                    justify-content: space-around;

                    .menu-button {
                         color: #fff;
                         border: 2px solid #fff;
                         padding: 15px 80px;
                         background: rgba(0,0,0, 0.3);
                         text-decoration: none;
                         cursor: pointer;
                         &:hover {
                            filter: brightness(80%);
                        }
                    }
                }
            }
        }
    }
main {

    .text-background {
        display: flex;
        justify-content: flex-end;

        &::after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 100vw 180px 0;
            border-color: transparent #000000 transparent transparent;
            position: absolute;
            z-index: -1;
        }
        .text-wrapper {
            display: flex;
            flex-direction: column;
            color: white;

            .left-text {
                color: #FFFFFF;
                font-size: 70%;
                width: 45%;
                padding-top: 20px;
                padding-right: 45px;
                align-self: flex-end;
            }

            .right-text {
                margin-left: 10%;
                align-self: flex-start;
                font-size: 80%;
                width: 23%;
                padding-top: 10px;
            }
        }
    }
}

如何在CSS中显示三角形伪元素？

0 个答案: