带1px外边框的小三角形的div实现（转载+个人笔记）(未完善)

写页面的时候有时候会遇到带有1px外边框三角形的下拉框，就像下面这样：

首先把下面这个div取个类名：class=" finish-lesson"，

这种就相当于两个绝对定位的无边框三角形叠加在一起，外三角边框比里三角小1px，并且外三角定位比里三角靠外1px，形成边框线。代码：

.finish-lesson:before {
    /*.before为ie6下用到*/
    content: '';
    /*伪类下的属性*/
    display: block;
    position: absolute;
    top: -41px;
    right: 20px;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;
    /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border: 20px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent rgba(0, 0, 0, 0.07) transparent;
    z-index: 2;
}

.finish-lesson:after {
    /*.after为ie6下用到*/
    content: '';
    /*伪类下的属性*/
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;
    /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border: 19px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent rgba(240, 245, 255, 1) transparent;
    position: absolute;
    right: 21px;
    top: -38px;
    z-index: 2;
}

那么带有边框的透明三角形如何实现呢，