用CSS伪元素制作箭头

浏览数：27 / 时间：2015年06月09日

现在让我们开始制作箭头吧！

在开始前，你要知道如何用CSS去画一个三角形，如果还不清楚可以看看这里纯CSS画各种图形

我们用到两个CSS伪元素，before和after，它们属于行内元素，但可以用display来改变，before和after是在CSS2的新特性（现在已经老了），浏览器对其兼容性还未了解。

实现代码如下：

 1 <!--CSS样式，在项目中可以把相同的属性与属性值对写在一起，这里是方便学习-->
 2 <style>
 3 .divtest{
 4     position: absolute;
 5     left: 100px;
 6     height: 40px;
 7     width: 200px;
 8     padding-left: 30px;
 9     background: red;
10     line-height: 40px;
11 }
12 .divtest:before{
13     content: ‘‘;
14     position: absolute;
15     top: 0;
16     left: -20px;
17     height: 0;
18     width: 0;
19     border-top: 20px solid rgb(255, 0, 0);
20     border-left: 20px solid #FFFFFF;
21     /* border-right: 20px solid #AF9E9E; */
22     border-bottom: 20px solid #FF0000;
23     background: red;
24 }
25 .divtest:after{
26     content: ‘‘;
27     position: absolute;
28     top: 0;
29     right: -20px;
30     height: 0;
31     width: 0;
32     border-top: 20px solid rgb(255, 255, 255);
33     border-left: 20px solid #FF0000;
34     /* border-right: 20px solid #AF9E9E; */
35     border-bottom: 20px solid #FFFFFF;
36     background: red;
37 }
38 </style>
39 <body>
40 <div class="divtest">
41 这是一个箭头
42 </div>

效果图：

这是一个箭头

这里用CSS伪元素实现了前后两个小三角形，一个白色一个红色，分别添加到div块元素的前后，就变成了箭头。当然稍作修改也可以实现下面的箭头

这是一个箭头

除了这些，你还可以为这些箭头添加样式，如渐变、投影、边距、旋转等

下面是边框的代码，观察一下边缘处的分配原则：

 1 <style>
 2 .divtest1{
 3     width:0;
 4     height:0;
 5     border-top: 40px solid blue;
 6     border-left: 40px solid red;
 7     border-right:40px solid yellow;
 8     border-bottom: 40px solid green;
 9 }
10 </style>
11 <div class="divtest1">&nbsp;</div>