css 实现三角原理解释

1：首先一个元素在以下结构下面是个黑色的正方形

.div1{
      	width:0;
      	height: 0;
      	border:4px solid;
      }

2：四块红色和黑色的木板代表元素的四个边框，把他们两横两竖重叠起来，这时候他们在二维平面的投影便成了上面的效果。
说到这里，大家该明白了上面的三角形图标是怎么来的了吧：元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。

.div1{
      	 width:0;
      	 height: 0;
	border-top: 40px solid #000;
	border-right: 40px solid #ff0000;
	border-left: 40px solid #ff0000;
	border-bottom: 40px solid #000;
      }

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

 总结：打算向那边，那边的border就不存在，但是如果存在则表示在这个方向上一段位移；
比如：向上的三角，如果存在Border-top:2px solid transparent;  则表明在top方向上向下移动了2px的位移,则对于div来说就是把元素的高度撑开了2px.===padding

实践篇：
  1：  实现更加简单的写法：

.triangle2{
  width:0;
  height:0;
  border: 50px transparent solid;
  border-right-color:black;   /* 向左的三角形*/
}

2 :实现对话框

 .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必带技能，重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }

html: <div class="test-div"> hi how are you!</div>