关于绝对定位的问题

来源：2-17 自由编程

一坨羊毛

2021-10-13 15:28:07

相关代码：html

<!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>text3</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div class="bigbox">

        <div class="box1">
            <div  class="b">
                <img src="images/b1.jpg" alt="">
            </div>

            <div  class="b">
                <div class="wz">
                    <div class="wztitle">Library</div>
                    <div class="wzs">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="wzq">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    <button>EXPLORE</button>
                </div>
            </div>

            <div  class="b">
                <img src="images/b2.jpg" alt="">
            </div>

            <div  class="b">
                <div class="wz">
                    <div class="wztitle">Library</div>
                    <div class="wzs">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="wzq">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    <button>EXPLORE</button>
                </div>
            </div>

        </div>

       
        <div class="box2">
            <div  class="b">
                <div class="wz">
                    <div class="wztitle">Library</div>
                    <div class="wzs">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="wzq">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    <button>EXPLORE</button>
                </div>
            </div>

            <div  class="b">
                <img src="images/b3.jpg" alt="">
            </div>
           
            <div  class="b">
                <div class="wz">
                    <div class="wztitle">Library</div>
                    <div class="wzs">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="wzq">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    <button>EXPLORE</button>
                </div>
            </div>

            <div  class="b">
                <img src="images/b4.jpg" alt="">
            </div>
        </div>

    </div>
</body>
</html>

相关代码：CSS

*{
    margin: 0;
    padding: 0;
}
.bigbox{
    width: 100%;
}
.bigbox .b{
    width: 25%;
    height: 380px;
    float: left;

}
.bigbox .box1{
    overflow: hidden;
}
.bigbox .box2{
    overflow: hidden;
}
img{
    width:100%;
    display:block;
}
.wz{
    background-color: #07cbc9;
    overflow: hidden;
    height: 380px;
    position: relative;
}
.wz::before{
    content:"";
    border: 20px solid transparent;
    border-right-color:red;
    position: absolute;
    top:50%;
    margin-top: -10px;
    left: -40px;

}
.wz .wztitle{
    margin-top:20px;
    margin-left:20px;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
}
.wz .wzs{
    margin-top:30px;
    margin-left:20px;
    font-size: 24px;
    color: #ffffff;
}
.wz .wzq{
    margin-top:30px;
    margin-left:20px;
    font-size: 16px;
    color: gray;
}
.wz button{
    width: 138px;
    height: 40px;
    display: block;
    background-color:black ;
    color: #ffffff;
    margin: 30px auto;
}

相关截图：