CSS实现带箭头的提示框

咱们在不少UI框架中看到带箭头的提示框，感受挺漂亮，可是以前一直不知道其原理，今天网上找了些资料算是弄清楚原理了；

先上效果图：

原理分析：

    上面的箭头有没有以为很像一个三角形，是的，它就是三角形；只不过它这个尖角是经过两个三角形来实现的；

首先新建一个div，画出提示框的轮廓

<div class="demo"></div>

给定样式：

    .demo{
        width:100px;
        height:100px;
        position:absolute;
        top: 35%;
        left:40%;   
        border:2px solid red;
        border-radius:8px;
    }

这样，咱们简单的一个正方形提示框就出来；

关键点：

   如今咱们在class=“demo”的div里面加入一个子级元素div

   <div class="demo">
        <div class="shixin"></div>
    </div>

添加样式：

    .shixin{
        width:0;
        height:0;
        border:100px solid ;
        border-color:red green yellow blue;
        position: relative;
        top: -21%;
        left:15%;
    }

宽高都设为0；而后设置一个边框的宽度，暂且设为100，边框颜色本身设定；此时的应该是一个200*200的正方形，由于上下边框相加为200px；左右边框相加为200px；

效果图：

 

 

而后咱们如今只须要它的下面（下面的三角形）的一部分；

    .shixin{
        width:0;
        height:0;
        border:100px solid transparent;
        border-bottom-color:red;
        position: relative;
        top: -21%;
        left:15%;
    }

切记：border属性的颜色必定要写为transparent（透明），否则默认为黑色；而后咱们须要下面的三角形，咱们只须要用border-bottom-color属性给下边框添加颜色便可称为实心三角形；

 

 

 

而后咱们适当的调整一下大小，三角形的大小是经过border的宽度来调的，由于这个其实就是border的宽度；

 

 

就这样，一个实心的三角形提示框效果已经出来了，可是别人UI框架都是空心的啊，不要紧，咱们接着往下走：

在class="demo"的div下面再加一个div

    <div class="demo">
        <div class="shixin"></div>
        <div class="kongxin"></div>
    </div>

添加样式：

    .kongxin{
        width:0;
        height:0;
        border:10px solid transparent;
        border-bottom-color:#fff;
        position: relative;
        top: -39%;
        left:15%;
    }

看到了吗？咱们给这个三角形也是添加同样的样式，实现空心效果其实就是将三角形的颜色改成背景色，背景默认为白色，而后经过position：relative相对定位移到实心三角形处进行重合便可；

 

 

最后咱们的带箭头的提示框就完成了，感兴趣的朋友赶忙本身动手试试吧！