/* 每个图文区域设置相对定位 */

.tuwen .btn2 {

    position: relative;

}

/* 左三角 */

.tuwen .sjl::before {

    content: '';

    width: 0;

    height: 0;

    border: 20px solid transparent;

    border-right-color: #07cbc9;

    position: absolute;

    left: -40px;

    top: 50%;

}

/* 右三角 */

.tuwen .sjr::before {

    content: '';

    width: 0;

    height: 0;

    border: 20px solid transparent;

    border-left-color: #07cbc9;

    position: absolute;

    left: 100%;

    top: 50%;

}

​

    <!-- 图文混排区 -->

    <div class="tuwen">

        <!-- 图片1 -->

        <div class="pic-1 btn1">

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

        </div>

        <!-- 文字2 -->

        <div class="des-2 btn2 sjl">

            <h3><b><span>Library</span></b></h3>

            <p class="g1">Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="g2">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 href=""><span>EXPLORE</span></a>

        </div>

        <!-- 图片3 -->

        <div class="pic-3 btn1">

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

        </div>

        <!-- 文字4 -->

        <div class="des-4 btn2 sjl">

            <h3><b><span>Computer Lab</span></b></h3>

            <p class="g1">Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="g2">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 href=""><span>EXPLORE</span></a>

        </div>

        <!-- 文字5 -->

        <div class="des-5 btn2 sjr">

            <h3><b><span>Conference Hall</span></b></h3>

            <p class="g1">Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="g2">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 href=""><span>EXPLORE</span></a>

        </div>

        <!-- 图片6 -->

        <div class="pic-6 btn1">

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

        </div>

        <!-- 文字7 -->

        <div class="des-7 btn2 sjr">

            <h3><b><span>Conference Hall</span></b></h3>

            <p class="g1">Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="g2">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 href=""><span>EXPLORE</span></a>

        </div>

        <!-- 图片8 -->

        <div class="pic-8 btn1">

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

        </div>

    </div>