css 三角形

<div class="business-div">
                <span>数据不一致</span>
                <div class="div-hover">
                    <div class="label-dev">描述:<span>xxxxxxxxxxxxx</span> 
                    </div>
                </div>
 </div>



.business-div{
    position: absolute;
     margin-top: -10px;
     cursor: pointer;
 }
 .div-hover{
     display: block;
     background: #E6EBF2;
     top: 27px;
     left: -17px;
     position: absolute;
      205px;
     padding: 10px;
     border: 1px solid #99AFCA;
     border-radius: 5px;
     z-index: 99;
 }
 .business-div:hover .div-hover{
     display: block;
     background: #E6EBF2;
     top: 27px;
     left: -17px;
     position: absolute;
      205px;
     padding: 10px;
     border: 1px solid #99AFCA;
     border-radius: 5px;
     z-index: 99;
 }
 .div-hover:before{
     content: "";
     position: absolute;
     top: -10px;
     left: 40px;
     border-bottom: 10px solid #99AFCA;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
 }
 .div-hover:after{
     content: "";
     position: absolute;
     top: -9px;
     left: 40px;
     border-bottom: 10px solid #E6EBF2;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
 }

  

原文地址:https://www.cnblogs.com/webljl/p/15016375.html