用CSS伪元素制作箭头

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

在开始前,你要知道如何用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>

效果图:

 

 这个例子,我们可以更好的理解边框了。

你可能感兴趣的:(css)