相关代码：Html

 <div class="graphic-mixed">



        <img src="images/b1.jpg" alt=""> 


        <div class="spec1">
            <div class="text">
                <h2>Library</h2>
                <h3>lorem lpsum is simply dummy text of the printing and typesetting industry. </h3>
                <p>Lorem lpsum 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 href="">EXPLORE</a>

            </div>

        </div>


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



        <div class="spec1">
            <div class="text">
                <h2>Library</h2>
                <h3>lorem lpsum is simply dummy text of the printing and typesetting industry. </h3>
                <p>Lorem lpsum 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 href="">EXPLORE</a>
            </div>

        </div>

        <div class="spec2">
            <div class="text">
                <h2>Library</h2>
                <h3>lorem lpsum is simply dummy text of the printing and typesetting industry. </h3>
                <p>Lorem lpsum 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 href="">EXPLORE</a>
            </div>

        </div>



        <img src="images/b3.jpg" alt="">



        <div class="spec2">
            <div class="text">
                <h2>Library</h2>
                <h3>lorem lpsum is simply dummy text of the printing and typesetting industry. </h3>
                <p>Lorem lpsum 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 href="">EXPLORE</a>
            </div>

        </div>


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



    </div>

     相关代码：CSS 

​/* 图文混排区域 */
.graphic-mixed{
    width: 100%;
    height: 760px;

}


.graphic-mixed img{
    float: left;
    width: 25%;
    height: 380px;
}

.graphic-mixed .spec1{
    position: relative;
}

.graphic-mixed .spec1 .text::before{
    content: '';
    width:0;
    height:0;
    border: 20px solid transparent;
    border-right-color:#07cbc9;
    position: absolute;
    margin-left: -40px;
    margin-top:150px;


}

.graphic-mixed .spec2{
    position: relative;
}

.graphic-mixed .spec2 .text::after{
    content: '';
    width:0;
    height:0;
    border: 20px solid transparent;
    border-left-color:#07cbc9;
    position: absolute;
    margin-left:336px;
    margin-top: -120px;
}

.graphic-mixed .text{
    float: left;
    width: 25%;
    height: 380px;
    background-color: #07cbc9;
}




.graphic-mixed .text h2{
    padding: 20px;
    font-size: 24px;
    color: white;
}

.graphic-mixed .text h3{
    font-size: 16px;

    color: white;
    padding-top: 10px;

}

.graphic-mixed .text p{
    font-size: 14px;
    color:gray;

    padding: 20px;
    padding-top: 0;


}



.graphic-mixed .text a{
    display: block;
    text-decoration: none;
    width: 138px;
    height: 40px;
    background-color:black;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
}