带箭头的css

转载

mb5fcdf2ea5f3c5 2021-10-30 15:01:00

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           .info-type-one{
               width: 120px;
               height: 30px;
               border: 1px solid #EEE;
               margin: 0 auto;
               text-align: center;
               line-height: 30px;
           }
           .info-panel-triple{
               width: 0;
               height: 0;
               border: 8px solid transparent;
               border-bottom-color: hsla(0,0%,6%,.6);
               position: absolute;
               left: 16px;
               top: -16px;
           }
           .info-panel-content{
               display: inline-block;
               position: relative;
               margin-top: 15px;
               height: 30px;
               line-height: 30px;
               background-color: hsla(0,0%,6%,.6);
               color: #FFF;
               text-align: left;
               padding-left: 15px;
               padding-right: 12px;
               border-radius: 3px;
               font-size: 0.8rem;
               letter-spacing: 0.1rem;
           }
       </style>

   </head>
   <body>
   <div class="info-type-one">
       
       <div class="">
           测试内容！
       </div>
       
       <div class="info-panel-content">
           
           <div class="info-panel-triple"></div>
           啦
       </div>
   </div>

   </body>
</html>