CSS实现三角形及before和after伪类的使用

发表于

网页中，html为骨架，而css则是为我们的网页进行润色，丰富色彩，css的作用随着CSS3的发展而显得日益客观，几行简单的代码就能实现酷炫的效果，今天就来讲讲怎么通过纯CSS制作三角
，并且介绍三角形和after和before的结合使用。

border属性

在开始介绍做法之前，先来看看两个例子，他们会让我们对css如何实现三角形有更加直观的了解。

CSS:

1
2
3
4
5
6
7
.triangle{
    width:30px;
    height:30px;
    border-width:20px;
    border-style:solid;
    border-color:#ff9966 #cc66ff #33ff66 #00ccff
}

效果图：

exp1

这是在有宽高的情况下的效果图，如果我们把宽高去掉，会发生什么变化呢？

exp2

很明显，四个边框变成了四个三角形，现在我们只需要把不需要的三角形设置为透明，就能得到我们唯一想要的三角形了。

上三角

ps：IE6下吧边框设置成transparent时会出现黑影，并不会透明，把border-style设置成dashed就ok了。

这里有几种写法

CSS（1）:

1
2
3
4
5
6
7
.triangle{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:dashed dashed solid dashed ;
    border-color:transparent transparent #33ff66 transparent;
}

CSS（2）:

1
2
3
4
5
6
.triangle{
    width:0px;
    height:0px;
    border:20px solid transparent;
    border-bottom-color:#3f6;
}

CSS（3）:

1
2
3
4
5
6
7
.triangle{
    width:0px;
    height:0px;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-bottom:20px solid #3f6;
}

效果图

exp3

其他的三角形（下、左、右）只需要将其他三个方向的颜色置为透明即可。

如何使三角形紧贴在元素上？

  • 方法一：定义一个标签，画出一个三角形，在进行定位
  • 方法二：用before和after伪元素画出三角形

我们用第二种方法来做个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.triangle{
    width:200px;
    height:100px;
    position:relative;
    border:1px solid #c2e1f5
}
.triangle:before,.triangle:after{
	display:block;
	content:"";
	width:0px;
	height:0px;
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	position:absolute;
}
.triangle:before{
			
	border-top:15px solid #c2e1f5;
	top:100%;
	left:60%;
}
.triangle:after{
	border-top:15px solid #fff;
	top:99%;
	left:60%;
}

思路：我们用before和after分别画出一个三角形，前者为边框色，后者为背景色，后者会覆盖在前者之上，我们需要使两者相差1px，露出边框色。

三角形和after及before伪元素的结合就介绍到这里了，是不是挺简单的呢！这样我们就不用再用图片去实现，节省了一次请求哦！