用CSS伪元素制作箭头
现在让我们开始制作箭头吧！
在开始前，你要知道如何用CSS去画一个三角形，如果还不清楚可以看看这里纯CSS画各种图形
我们用到两个CSS伪元素，before和after，它们属于行内元素，但可以用display来改变，before和after是在CSS2的新特性（现在已经老了），浏览器对其兼容性还未了解。
实现代码如下：
<!--CSS样式，在项目中可以把相同的属性与属性值对写在一起，这里是方便学习-->
<style>
.divtest{
position: absolute;
left: 100px;
height: 40px;
width: 200px;
padding-left: 30px;
background: red;
line-height: 40px;
}
.divtest:before{
content: '';
position: absolute;
top: 0;
left: -20px;
height: 0;
width: 0;
border-top: 20px solid rgb(255, 0, 0);
border-left: 20px solid #FFFFFF;
/* border-right: 20px solid #AF9E9E; */
border-bottom: 20px solid #FF0000;
background: red;
}
.divtest:after{
content: '';
position: absolute;
top: 0;
right: -20px;
height: 0;
width: 0;
border-top: 20px solid rgb(255, 255, 255);
border-left: 20px solid #FF0000;
/* border-right: 20px solid #AF9E9E; */
border-bottom: 20px solid #FFFFFF;
background: red;
}
</style>
<body>
<div class="divtest">
这是一个箭头
</div>
效果图：
这里用CSS伪元素实现了前后两个小三角形，一个白色一个红色，分别添加到div块元素的前后，就变成了箭头。当然稍作修改也可以实现下面的箭头
除了这些，你还可以为这些箭头添加样式，如渐变、投影、边距、旋转等
下面是边框的代码，观察一下边缘处的分配原则：
<style>
.divtest1{
width:0;
height:0;
border-top: 40px solid blue;
border-left: 40px solid red;
border-right:40px solid yellow;
border-bottom: 40px solid green;
}
</style>
<div class="divtest1"> </div>
效果图：
这个例子，我们可以更好的理解边框了。
用CSS伪元素制作箭头的更多相关文章
- CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素
CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...
- 使用css3和伪元素制作的一个立体导航条
使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 伪元素分享！！！
最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- js如何控制css伪元素内容（before，after）
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
随机推荐
- Python基础学习之文件(1)
1.文件对象 文件对象不仅可以用来访问普通的磁盘文件,还可以访问具有文件类型接口的其他对象;文件只是连续的字节序列. 2.文件内建函数(open()) 内建函数open()是打开文件的"钥匙 ...
- PDO链式操作——针对关键字出现问题的解决方案
例如: 1.执行一条SQL语句:查询user表中的所有数据,并通过name字段进行降序,通过age进行升序 2. 案例1: 正确的执行语句为:SELECT * FROM user ORDER BY ...
- navicat for mysql注册码：NAVN-LNXG-XHHX-5NOO
名.组织可以为空或任意填写. 摘自: navicat for mysql10.0.0.0注册码中“名”.“组织”...._百度知道
- 我的visual studio 配色方案 Rubik c++版
只是更改了c++的配色,放出来与大家分享,因为大胆地采用了各种颜色,所以我把它取名叫做Rubik,因为Rubik‘s cube也就是魔方,我本人是非常喜欢魔方的,然后也符合颜色丰富多彩的这个特征,希望 ...
- 使用selenium启动火狐浏览器，解决Unable to create new remote session问题
今天用火狐浏览器来做自动化,才启动就报错,提示不能创建新的session,不能启动浏览器 问题原因: 火狐driver与火狐浏览器与selenium版本的不兼容 我使用的火狐driver是0.21.0 ...
- UVA 11983 Weird Advertisement
题意:求矩形覆盖k次以上的区域总面积. 因为k≤10,可以在线段树上维护覆盖次数为0,...,k, ≥k的长度数量. 然后就是一个离散化以后扫描线的问题了. 离散化用的是半开半闭区间,以方便表示没有被 ...
- python 爬图片
学了两天python,语法慢慢熟悉吧,数据结构都没写过. 写了一个爬图片的小东西.挺有意思的.都是女神照 (✿◡‿◡) 用的是正则表达式, ''' 符号: . 匹配任意字符,\n除外 * 匹配前一个字 ...
- 在vue中使用插槽 slot
插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...
- 通过redis实现的一个抢红包流程，仅做模拟【上】
建议结合下一篇一起看 下一篇 数据结构+基础设施 数据结构 这里通过spring-data-jpa+mysql实现DB部分的处理,其中有lombok的参与 @MappedSuperclass @Dat ...
- 缓冲区溢出实战教程系列（二）：dev c++编译汇编代码
小伙伴们对我上一篇文章的反应完全出乎了我的意料,感谢大家对我的支持和认可.接下来我会精心的把这一系列课程设计好,尽量详细的展示给大家.上篇文章我列举了一个缓冲区溢出的小例子,并提到了dev c++.o ...