画一个三角形，并用before和after伪元素画一个对话框

之前暑假面试问到的一个问题，因为CSS基础差只答出了前半段被面试官骂只会div，整理一下写法。

首先before指元素内容插入之前的内容，after则为插入之后的内容。

思路：先画一个正方形，设置before和after为绝对属性，宽高为0，利用border-top/left/right/bottom来选取位置，before为正方形边框颜色，而after模拟透明颜色，用来覆盖before和正方形一边，其中before的border的宽度稍大些。

#triangle {
            margin: 100px;;
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: relative;
            border: 2px solid #333;
        }

        #triangle:after, #triangle:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            top: 100%;
            position: absolute;
            width: 0;
        }

        #triangle:after {
            border-width: 10px;
            border-top-color: #fff;
            left: 20px;
        }

        #triangle:before {
            border-width: 12px;
            border-top-color: #000;
            left: 18px;
        }

渲染结果为：