css 三角指示线 |dw 删除模板中的css文件夹

/* 为了使用伪元素 ::before 和 ::after，大家需要将元素的 position 属性设置为 relative 或者 absolute */
.triangle {
position: relative;
display: inline-block;
/* 设置元素的宽高，以及边框的颜色和尺寸 */
width: 100px;
height: 100px;
border: 1px solid #ccc;
/* 为了创建三角指示线，大家需要先创建一个和元素一样大小和位置的空白伪元素 */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 0;
height: 0;
/* 通过设置边框颜色和大小，创建一个 45 度角的三角形 */
border-right: 10px solid transparent;
border-top: 10px solid red;
}
}

要创建一个向下的三角指示线，大家只需要把伪元素的 border 改为 border-top 和 border-right 即可。

.triangle-down {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccc;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 0;
height: 0;
/* 设置 border-left 和 border-right 为透明 */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
/* 设置 border-bottom 和 border-top 的颜色和大小 */
border-bottom: 10px solid blue;
}
}

需要注意的是，伪元素 ::before 和 ::after 只能在块级元素中使用。