<!-- 图文混排区域 ul来分为8个盒子-->
        <div class="img-and-word">
            <ul>
                <li>
                    <a class="img" href=""><img src="images/b1.jpg" alt=""></a>
                </li>
                <li>
                    <div class="word right">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">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.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <a class="img" href=""><img src="images/b2.jpg" alt=""></a>
                </li>
                <li>
                    <div class="word right ">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">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.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <div class="word  left">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">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.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <a class="img" href=""><img src="images/b3.jpg" alt=""></a>
                </li>
                <li>
                    <div class="word left">
                        <h3>Library</h3>
                        <p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                        <p class="p2">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.</p>
                        <button><a href="">EXPLORE</a></button>
                    </div>
                </li>
                <li>
                    <a class="img" href=""><img src="images/b3.jpg" alt=""></a>
                </li>
            </ul>
        </div>

/* 图文混排区域 */
.content .img-and-word{
    width: 100%;
    height: 760px;
    background-color: orange;
    margin-top: 20px;
   
}
.content .img-and-word ul {
    overflow: hidden;
   
}
.content .img-and-word ul li{
    float: left;
    width: 25%;
    height: 380px;
   
}
.content .img-and-word ul li a.img{
    /* 转块 */
    display: block;
    /* 宽度自适应 */
    height: 380px;
}
.content .img-and-word ul li img{
    /* 宽度自适应 */
    height: 380px;
    /* img是行内元素 转块消除间隙 */
    display: block;
}
.content .img-and-word ul li .word{
    height: 380px;
    background-color: #07cbc9;
    position: relative;
}
.content  .img-and-word ul li .right::before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color:#07cbc9 ;
    position: absolute;
    top: 50%;
    /* 自身高度的一半 */
    margin-top: -20px;
    left: -40px;
}
.content .img-and-word ul li .left::before{
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color:#07cbc9;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    right: -40px;
}
.content .img-and-word ul li .word h3{
    padding:20px 20px 30px;
    padding-right: 0;
    font-size: 24px;
    color: #fff;
}
.content .img-and-word ul li .word p{
    padding-left: 20px;
}
.content .img-and-word ul li .word p.p1{
    color: #fff;
    font-size: 16px;
    padding-bottom: 20px;
}
.content .img-and-word ul li .word p.p2{
    color: gray;
    font-size: 14px;
    padding-bottom: 30px;
}
.content .img-and-word ul li .word button{
    width: 138px;
    height: 40px;
    /* 转块 让其水平居中 */
    display:block;
    margin: 0 auto;
    background-color: #000;
    /* 去掉边框线 */
    border: none;
}
.content .img-and-word ul li .word button a{
    color: #fff;
    /* 转块 让按钮点击范围更大 */
    display: block;
    width: 138px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.content .img-and-word ul li .word button a:hover{
    background-color: #fff;
    color: #000;
}

.content .img-and-word ul li{
    float: left;
    width: 25%;
    height: 380px;
    position: relative;
}

相对定位给到li 为什么上边的三角形可以显示出来 下面的却被盖住了