你的位置:首页 > 网页设计

[网页设计]DIV+CSS实现三角形提示框


实现效果

实现代码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <link rel="shortcut icon" href="resources/img/logo-color.png" type="image/x-icon">  <title>测试</title>  <style>  .out-div {    color: #FFFFFF;    font-size: 16px;    line-height: 40px;    display: inline-block;    height: 40px;    width: 200px;    text-align: center;    border-radius: 5px;    margin-left: 32px;    vertical-align: top;    background-color: maroon;  }    .arrow {    width: 0px;    height: 0px;    border-top: 10px solid transparent;    border-right: 10px solid;    border-bottom: 10px solid transparent;    position: absolute;    margin-left: -10px;    margin-top: 10px;    border-right-color: maroon;  }  </style> </head> <body>  <div class="out-div">    <div class="arrow" ></div>    <span>这是一个提示框</span>  </div> </body></html>