div带箭头提示框实例

来源：互联网发布：淘宝网二手摄像头编辑：程序博客网时间：2024/06/08 03:32
<!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>
阅读全文
1 0