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

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

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

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

 1 .finish-lesson:before {
 2     /*.before为ie6下用到*/
 3     content: '';
 4     /*伪类下的属性*/
 5     display: block;
 6     position: absolute;
 7     top: -41px;
 8     right: 20px;
 9     width: 0;
10     height: 0;
11     overflow: hidden;
12     font-size: 0;
13     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
14     line-height: 0;
15     /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
16     border: 20px;
17     border-style: dashed dashed solid dashed;
18     border-color: transparent transparent rgba(0, 0, 0, 0.07) transparent;
19     z-index: 2;
20 }
21 
22 .finish-lesson:after {
23     /*.after为ie6下用到*/
24     content: '';
25     /*伪类下的属性*/
26     display: block;
27     width: 0;
28     height: 0;
29     overflow: hidden;
30     font-size: 0;
31     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
32     line-height: 0;
33     /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
34     border: 19px;
35     border-style: dashed dashed solid dashed;
36     border-color: transparent transparent rgba(240, 245, 255, 1) transparent;
37     position: absolute;
38     right: 21px;
39     top: -38px;
40     z-index: 2;
41 }

 

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

转载于:https://www.cnblogs.com/zhangDY/p/11289547.html