css实现纯三角

使用css实现一个三角形

具体的效果是这样的:
html

虽然是一个小的功能,但是项目开发中还是经常用到。用图片觉得太累赘,用css实现更好。

1
2
3
<div class="triangle_border_up">
<span></span>
</div>

注意:一般用一个div里面包裹一个标签实现。外层标签提供边框。内层div提供背景色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.triangle_border_up {
width: 0;
height: 0;
border-width: 0 7px 7px;
border-style: solid;
border-color: transparent transparent #ddd;
margin: -7px 10px;
position: relative;
}
.triangle_border_up span {
display: block;
width: 0;
height: 0;
border-width: 0 6px 6px;
border-style: solid;
border-color: transparent transparent #fafafa;
position: absolute;
top: 1px;
left: -6px;
}

位置,大小,三角朝向都可以自己调整。

谢谢你给我的支持,坚持原创技术分享,共同成长