<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>div带箭头提示框实例</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 "微软雅黑";
        }
        .nav-border3 {
            top:-17px;
            color:#DACE7C;
        }
        .nav-background3 {
            top:-16px;
            color:#F6F1B3;
        }        
    </style>
</head>  
<body>
<div class="info">
    <span>通过border</span>
    <div class="nav nav-border"></div>
    <div class="nav nav-background"></div>
</div>

<div class="info">
    <span>通过transform</span>
    <div class="nav2"></div>
</div>

<div class="info">
    <span>通过♦</span>
    <div class="nav3 nav-border3">♦</div>
    <div class="nav3 nav-background3">♦</div>
</div>
</body>  
</html>

div带箭头提示框实例_div带箭头

​