现在让我们开始制作箭头吧！
在开始前，你要知道如何用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"> </div>
效果图：
这个例子，我们可以更好的理解边框了。
时间： 2024-10-05 05:07:47