使用伪元素添加三角形后，缩放网页后小三角排列错乱

首页课程实战体系课手记专栏慕课教程

来源：2-17 自由编程

头too

2021-06-14 16:30:45

前两个小三角正常显示，后两个缩放网页后排列错乱。

相关截图：

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-10 自由编程</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        li {
            position: relative;
            float: left;
            height: 380px;
            width: 25%;
            background-color: #07cbc9;
        }

        img {
            background-size: cover;
            height: 380px;
            width: 100%;
            /* 宽度跟随父级宽度，li为25%，子级中的img为100%即可和父级大小一样宽*/
            display: block;
        }

        h3 {
            font-size: 24px;
            color: white;
            margin: 20px 0 30px 20px;
        }

        .p1 {
            font-size: 16px;
            color: white;
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .p2 {
            font-size: 14px;
            color: gray;
            margin-left: 20px;
            margin-bottom: 30px;
        }

        a {
            display: block;
            color: honeydew;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        ul .link {
            width: 138px;
            height: 40px;
            margin: 0 auto;
            background-color: black;
        }

        .lib1::before {
            content: "";
            position: absolute;
            top: 170px;
            left: -40px;
            width: 0;
            height: 0;
            display: block;
            clear: both;
            border: 20px solid transparent;
            border-right-color: red;
        }

        .lib2::before {
            content: "";
            position: absolute;
            top: 170px;
            left: -40px;
            width: 0;
            height: 0;
            display: block;
            clear: both;
            border: 20px solid transparent;
            border-right-color: red;
        }

        .lib3::before {
            content: "";
            position: absolute;
            top: 170px;
            left: 486px;
            width: 0;
            height: 0;
            display: block;
            clear: both;
            border: 20px solid transparent;
            border-left-color: red;
            margin-left: -10px;
            z-index: 999;
        }
        /* .lib4::before {
            content: "";
            position: absolute;
            top: 170px;
            left: 466px;
            display: block;
            clear: both;
            border: 20px solid transparent;
            border-left-color: red;
        } */
    </style>
</head>

<body>

    <div class="content">
        <ul>
            <li>
                <img src="images/b1.jpg" class="b1">
            </li>
            <li>
                <h3 class="lib1">Library</h3>
                <p class="p1">Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry</p>
                <p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis doloribus quaerat necessitatibus voluptatibus rerum perspiciatis enim nesciunt illo corporis ut animi inventore quas vel et labore, voluptates iste autem perferendis.</p>
                <div class="link">
                    <a href="#">EXPLORE</a>
                </div>
                <div class="tran">

                </div>
            </li>
            <li>
                <img src="images/b2.jpg" class="b1">
            </li>
            <li>
                <h3 class="lib2">Library</h3>
                <p class="p1">Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry</p>
                <p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis doloribus quaerat necessitatibus voluptatibus rerum perspiciatis enim nesciunt illo corporis ut animi inventore quas vel et labore, voluptates iste autem perferendis.</p>
                <div class="link">
                    <a href="#">EXPLORE</a>
                </div>
            </li>

            <li>
                <h3 class="lib3">Library</h3>
                <p class="p1">Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry</p>
                <p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis doloribus quaerat necessitatibus voluptatibus rerum perspiciatis enim nesciunt illo corporis ut animi inventore quas vel et labore, voluptates iste autem perferendis.</p>
                <div class="link">
                    <a href="#">EXPLORE</a>
                </div>
            </li>
            <li>
                <img src="images/b3.jpg" class="b1">
            </li>

            <li>
                <h3 class="lib4">Library</h3>
                <p class="p1">Lorem Ipsum is simply dummy text of the printing and<br> typesetting industry</p>
                <p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis doloribus quaerat necessitatibus voluptatibus rerum perspiciatis enim nesciunt illo corporis ut animi inventore quas vel et labore, voluptates iste autem perferendis.</p>
                <div class="link">
                    <a href="#">EXPLORE</a>
                </div>
            </li>
            <li>
                <img src="images/b4.jpg" class="b1">
            </li>
        </ul>
    </div>

</body>

</html>