首页 > 代码库 > 用CSS伪元素制作箭头
用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>效果图：
<style></style>这是一个箭头
这里用CSS伪元素实现了前后两个小三角形，一个白色一个红色，分别添加到div块元素的前后，就变成了箭头。当然稍作修改也可以实现下面的箭头
<style></style>这是一个箭头
除了这些，你还可以为这些箭头添加样式，如渐变、投影、边距、旋转等
下面是边框的代码，观察一下边缘处的分配原则：
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>效果图：
<style></style>这个例子，我们可以更好的理解边框了。
用CSS伪元素制作箭头
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。