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