用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 简单粗 ...
随机推荐
- Selenium入门9 上传文件
上传文件步骤 1 找到文件上传的input标签 find_element_by_css_selector("input[type='file']") 2 用send_keys传入 ...
- IOS中 copy ，strong ，weak ，assign使用区别
.@property属性的用法 * weak(assign) : 代理\UI控件 * strong(retain) : 数组.模型)其他对象(除代理\UI控件\字符串以外的对象) * copy ...
- log4net 简单配置
<configSections> <section name="log4net" type="log4net.Config.Log4NetConfigu ...
- Linux高性能server编程——定时器
版权声明:本文为博主原创文章.未经博主允许不得转载. https://blog.csdn.net/walkerkalr/article/details/36869913 定时器 服务器程序通常管 ...
- 【CCPC-Wannafly Winter Camp Day4 (Div1) C】最小边覆盖（简单题）
点此看题面 大致题意: 给你一个边集的子集,问你这可不可能是这张图的最小边覆盖. 大致思路 考虑到,如果一条边连接的两个点度数都大于等于\(2\),则这条边完全可以删去. 因此,我们只要判断是否存在这 ...
- 【HHHOJ】ZJOI2019模拟赛（十五）03.17 解题报告
点此进入比赛 得分: \(42+10+14=66\) 排名: \(Rank\ 3\) \(Rating\):\(+53\) \(T1\):[HHHOJ200]稗田的梦中之梦(点此看题面) 暴力\(DF ...
- VPS 运行 Node.js 的一些经验
VPS 系统选择 各系统安装难易对比 Ubuntu.Debian 较为简单,CentOS 稍麻烦,32位系统比64位更节省内存 DigitalOcean 甚至推出了 Ubuntu + Node.js ...
- 阿里数据库连接池druid
官方wiki: https://github.com/alibaba/druid/wiki 实用方法介绍的想当详细,包含监控.扩展.大力推荐!
- C#流程控制语句
C#流程控制语句 一.选择语句 当程序中需要进行两个或两个以上的选择时,可以根据条件的判断来选择将要执行的一组语句. ?if语句 ?switch语句 二.循环语句 循环语句是对一个程序模块进行的重复操 ...
- C#中this保留字的用法
一.this保留字 this保留字一般只在构造函数.类的方法和类的实例中使用.它有以下含义: ?在类的构造函数中出现的this,则作为一个值类型,表示对正在构造的对象本身的引用. ?在类的方法中出现的 ...