CSS实现tip框三角形

CSS实现tip框

方法一：利用盒模型border

利用长宽设为0，border设为一定宽度，上下左右一边设为三角形颜色，另外的transparent

.parent1{
            width: 0;
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: red transparent transparent transparent;
        }

得到三角形： 这里30px指的三角形高30px，长60px
由此

<div class="parent1">     
　　<div class="div2"></div>
　　<div class="div1"></div>
</div>

        .parent1{
            position: relative;
            width: 400px;
            height: 100px;
            border: 1px solid #f07848;
            background-color: #dddddd;
            border-radius: 10px;
            margin: 100px auto;
        }
        .div1{
            position: absolute;
            left: 20px;
            bottom: -30px;
            border-style: solid;
            border-width: 15px;
            border-color: #dddddd transparent transparent transparent;
        }
        .div2{
            position: absolute;
            left: 20px;
            bottom: -31px;
            border-style: solid;
            border-width: 15px;
            border-color: #f07848 transparent transparent transparent;
        }

注意div2要比div1先渲染。

方法二：利用CSS3的transform

将正方形底色设为tip框底色，右边和底边的边框色设为tip框边框色，底边在tip底边下面一半的高度，这样旋转45度角即可。

<div class="parent1">     
    <div class="div3"></div>
</div>

       .parent1{
            position: relative;
            width: 400px;
            height: 100px;
            border: 1px solid #f07848;
            background-color: #dddddd;
            border-radius: 10px;
            margin: 100px auto;
        }
        .div3{
            position: absolute;
            left: 20px;
            bottom: -15px;
            width: 30px;
            height: 30px;
            background-color: #dddddd;
            border-right: 1px solid #f07848;
            border-bottom: 1px solid #f07848;
            transform: rotate(45deg);
        }