带小三角的提示框

最新推荐文章于 2024-06-27 10:54:13 发布

郝静and静静

最新推荐文章于 2024-06-27 10:54:13 发布

阅读量1k

点赞数

分类专栏：前端开发

前端开发专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
      .demo{
          margin-top:100px;
          /*width:200px;
          height:200px;*/
          width:130px;
          height:30px;
          border:2px solid #f30;
          background-color:#fff;
          position:relative;
          padding-left: 4px;
          padding-top: 10px;
          font-size: 14px;

      }
      .out,.in{
          position:absolute;
          width:0;
          height:0px;
      }
      .out{
          border:10px solid transparent;
          border-bottom-color:#f30;  /*这里的颜色一定要跟上面demo边框颜色一样*/
          top:-21px;
          left:20%;
      }
      .in{
          border:10px solid transparent;
          border-bottom-color:#fff;/*这里的颜色一定要跟demo背景颜色一样*/
          /*background-color:blue;*/
          top:-19px;
          left:20%;
      }
    </style>
</head>
<body>

<div class="demo">超出涨跌停版限制
    <div class="out"></div>
    <div class="in"></div>
</div>
</body>
</html>