用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 简单粗 ...
随机推荐
- IOS 运行循环
. 运行循环========================================在iOS的应用程序中,应用程序启动之后,系统即会创建一个运行循环监听用户的交互. 以下代码其本质是在运行循环 ...
- Unable to launch the Java Virtual Machine
看看国内的回答,http://zhidao.baidu.com/question/119993351.html 再看看国外的,http://www.mkyong.com/oracle/oracle-s ...
- 基于建模的视觉定位（SFM-Based Positioning）
具体方法来自我参与的这篇journal: Vision-Based Positioning for Internet-of-Vehicles, IEEE Transactions on Intelli ...
- Spring注解@Value数值取值转换字符串失败
配置文件(yml)中,配置项如下: cebconfig: INST_CODE: 08801001 SFT_NOTIFY_CEB_CHANNEL: 123456 期望INST_CODE: 0880100 ...
- Friendly Date Ranges-freecodecamp算法题目
Friendly Date Ranges 1.要求 把常见的日期格式如:YYYY-MM-DD 转换成一种更易读的格式. 易读格式应该是用月份名称代替月份数字,用序数词代替数字来表示天 (1st 代替 ...
- C#进阶学习笔记（个人整理）
学习笔记 第一章: 一.回顾数组 1.变量 : 只能存储一个数据 2.数组 :存储固定大小的相同类型的数据 3.对象 : 存储多个相同/不同类型的数据 4.集合 : 特殊的容器,存储N个相同/不同类型 ...
- linux shell 部分问题解决方法
1. 判断shell里判断字符串是否包含某个字符 a. 可以用正则式匹配符号 “=~” 举例:str="this is a string" 要想在判断str中是否含有 ...
- python之doctest的用法
doctest是python自带的一个模块,你可以把它叫做“文档测试”(doctest)模块. doctest的使用有两种方式:一个是嵌入到python源中.另一个是放到一个独立文件. doctest ...
- Linux下MySQL安装及配置
Linux下MySQL安装及配置 安装MySQL Ubuntu系统中,直接使用apt install的方式去安装MySQL的服务端和客户端,MySQL的客户端必须安装,否则无法通过命令连接并操作MyS ...
- 图像的模糊-opencv
调用两个API,一个是均值模糊,一个是高斯模糊.如下所示: #include<opencv2/opencv.hpp> #include<iostream> using name ...