HTML

<section class="pic-text">
    <ul>
        <li class="Library img">
            <img src="images/b1.jpg" alt="图文混排区图片">
        </li>
        <li class="text left">
            <div class="content">
                <h1>Library</h1>
                <p class="content-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="content-2">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>
                <a class="content-3" href="#">EXPLORE</a>
            </div>
        </li>
        <li class="Computer img">
            <img src="images/b2.jpg" alt="图文混排区图片">
        </li>
        <li class="text left">
            <div class="content">
                <h1>Library</h1>
                <p class="content-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="content-2">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>
                <a class="content-3" href="#">EXPLORE</a>
            </div>
        </li>
        <li class="text right">
            <div class="content">
                <h1>Library</h1>
                <p class="content-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="content-2">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>
                <a class="content-3" href="#">EXPLORE</a>
            </div>
        </li>
        <li class="ConferenceHall img">
            <img src="images/b3.jpg" alt="图文混排区图片">
        </li>
        <li class="text right">
            <div class="content">
                <h1>Library</h1>
                <p class="content-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="content-2">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>
                <a class="content-3" href="#">EXPLORE</a>
            </div>
        </li>
        <li class="PlayGround img">
            <img src="images/b4.jpg" alt="图文混排区图片">
        </li>
    </ul>
</section>

CSS

​.pic-text{
    width: 100%;
    margin-top: 10px;
}
.pic-text ul{
    list-style: none;
    overflow: hidden;
}
.pic-text ul li{
    width: 25%;
    height: 380px;
    float: left;
}
.pic-text ul li img{
    width: 100%;
    height: 380px;
    /*由于img是行内元素，默认存在间隙，可以给图片添加display:block;属性消除间隙。*/
    display:block;
}
.pic-text ul li.left{
    position: relative;
}
.pic-text ul li.left::before{
    content: "";
    height: 0;
    width: 0;
    border: 20px solid transparent;
    border-right-color: #07cbc9;
    position: absolute;
    top: 50%;
    left: -40px;
}
.pic-text ul li.right{
    position: relative;
}
.pic-text ul li.right::after{
    content: "";
    height: 0;
    width: 0;
    border: 20px solid transparent;
    border-left-color: #07cbc9;
    position: absolute;
    top: 50%;
    right: -40px;
}
.pic-text ul li.text{
    background: #07cbc9;
}
.pic-text ul li.text .content{
    margin: 20px;
}
.pic-text ul li.text .content h1{
    font-size: 20px;
    color: white;
    margin-bottom: 30px;
}
.pic-text ul li.text .content .content-1{
    font-size: 16px;
    color: white;
    margin-bottom: 20px;
}
.pic-text ul li.text .content .content-2{
    font-size: 14px;
    color: grey;
    margin-bottom: 30px;
}
.pic-text ul li.text .content .content-3{
    display: block;
    text-decoration-line: none;
    width: 138px;
    height: 40px;
    background: black;
    color: white;
    text-align: center;
    line-height: 40px;
    margin: 0 auto;
}