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);        }