麻烦老师看一下为何我这样写，三角箭头没出现？

首页课程实战体系课手记专栏慕课教程

来源：2-17 自由编程

铁蛋金刚侠

2020-11-15 20:28:36

具体遇到的问题

报错信息的截图

尝试过的解决思路和结果

粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码
```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <!-- 我发现所有的模块，包括button，text，h2都可以是div -->
    <div class="container">
        <img src="images/b1.jpg" alt="" class="container-img">
        <div class="content arrow-left">
            <div class="title">Library</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="article">Lorem Ipsum is simply dummy test of the printing and typesetting industry.Lorem Ipsum
                has been the industry's standard dummy text ever since the 1500s.
            </div>
            <div class="button">
                <a href="javascript:;">EXPLORE</a>
            </div>
        
        </div>
        
        <img src="images/b2.jpg" alt="" class="container-img">
        <div class="content arrow-left">
            <div class="title">Library</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="article">Lorem Ipsum is simply dummy test of the printing and typesetting industry.Lorem Ipsum
                has been the industry's standard dummy text ever since the 1500s.
            </div>
            <div class="button">
                <a href="javascript:;">EXPLORE</a>
            </div>
        </div>
        
        
        <div class="content arrow-right">
            <div class="title">Library</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="article">Lorem Ipsum is simply dummy test of the printing and typesetting industry.Lorem Ipsum
                has been the industry's standard dummy text ever since the 1500s.
            </div>
            <div class="button">
                <a href="javascript:;">EXPLORE</a>
            </div>
        </div>
        <img src="images/b3.jpg" alt="" class="container-img">


        <div class="content arrow-right">
            <div class="title">Library</div>
            <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
            <div class="article">Lorem Ipsum is simply dummy test of the printing and typesetting industry.Lorem Ipsum
                has been the industry's standard dummy text ever since the 1500s.
            </div>
            <div class="button">
                <a href="javascript:;">EXPLORE</a>
            </div>
        </div>
        <img src="images/b4.jpg" alt="" class="container-img">

        


    </div>



</body>
</html>




*{
    margin:0;
    padding:0;
}

.container{
    width:100%;
    /* overflow:hidden; */
}

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

.content{
    float:left;
    width:25%;
    height:380px;
    padding:20px;
    background-color: #07cbc9;
    box-sizing:border-box;
    
}

.container .content::before{
    content: "";
    display:block;
    width:0;
    height:0;
    border:20px solid transparent;
    position:absolute;
    top:50%;
    margin-top:-20px;
}

.container .arrow-left::before{
    border-right-color:#07cbc9;
    left:-40px;
}

.container .arrow-right::before{
    border-left-color:#07cbc9;
    left:-40px;
}




.content .title {
    font-size:24px;
    color: white;
    font-weight:bold;
}

.content .description{
    color:#fff;
    margin-top:30px;
}

.content .article{
    font-size:14px;
    color:gray;
    margin-top:20px;
}

.content .button{
    text-align:center;
    margin-top:30px;
}

.content .button a{
    width: 138px;
    height:40px;
    background-color: black;
    font-size:20px;
    color:white;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    line-height: 40px;
}

写回答

1回答