<! DOCTYPEhtml>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Div with an arrow prompt instance</title>
    <style type="text/css">
        .info {
            margin-top: 50px;
            position:relative;
            width:200px;
            height:50px;
            line-height:50px;
            background:#F6F1B3;
            box-shadow:1px 2px 3px #E9D985;
            border:1px solid #DACE7C;
            border-radius:4px;
            text-align:center;
            color:red;
        }
        .nav {
            position:absolute;
            left:30px;
            overflow:hidden;
            width:0;
            height:0;
            border-width:10px;
            border-style:solid dashed dashed dashed;
        }
        .nav-border {
            top: -20px;
            border-color:transparent transparent #DACE7C transparent;
        }
        .nav-background {
            top: -19px;
            border-color:transparent transparent #F6F1B3 transparent;
        }

        .nav2 {
            position:absolute;
            top: -8px;
            left:30px;
            overflow:hidden;
            width:13px;
            height:13px;
            background:#F6F1B3;
            border-left:1px solid #DACE7C;
            border-top:1px solid #DACE7C;
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }

        .nav3 {
            position:absolute;
            left:30px;
            overflow:hidden;
            width:24px;
            height:24px;
            font:normal 24px Microsoft Yahei;
        }
        .nav-border3 {
            top: -17px;
            color:#DACE7C;
        }
        .nav-background3 {
            top: -16px;
            color:#F6F1B3;
        }        
    </style>
</head>  
<body>
<div class="info">
    <span>Through the border</span>
    <div class="nav nav-border"></div>
    <div class="nav nav-background"></div>
</div>

<div class="info">
    <span>Through the transform</span>
    <div class="nav2"></div>
</div>

<div class="info">
    <span>Through the ♦</span>
    <div class="nav3 nav-border3">♦</div>
    <div class="nav3 nav-background3">♦</div>
</div>
</body>  
</html>  
Copy the code

\

Note: Welcome to join the web front-end job hunting qq group: 668352707\