用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 简单粗 ...
随机推荐
- MySQL的基础(优化）1
1,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽可能小 2,在可能的情况下,应该尽量把字段设置为NOT NULL,这样在将来执行查询的时候,数据库不用去比较NULL值 3,对于某 ...
- failed: No module named 'catkin_pkg' Make sure that you have installed "catkin_pkg"
https://stackoverflow.com/questions/43024337/why-this-error-when-i-try-to-create-workspaces-in-ros# ...
- IOS 计算文字尺寸（UILabel）
方式1 :普通用法 #define MJNameFont [UIFont systemFontOfSize:14] /** * 计算文字尺寸 * * @param text 需要计算尺寸的文字 * ...
- react里面怎么引入样式
模块样式 在刚开始构建好框架的时候,准备开始写业务,在第一个页面的时候就会碰到怎么引入样式的问题,踩过一些坑,不是使用style,头部也不需要另外取名,直接引入css就可以,引入方式是这样 <d ...
- Mysql limit 优化，百万至千万级快速分页，--复合索引的引用并应用于轻量级框架
MySql 性能到底能有多高?用了php半年多,真正如此深入的去思考这个问题还是从前天开始.有过痛苦有过绝望,到现在充满信心!MySql 这个数据库绝对是适合dba级的高手去玩的,一般做一点1万篇新闻 ...
- C#操作Word，写数据，插入图片
本篇介绍的是如何在C#中往word里面写入数据. 如何在线的操作文档: c#在线操作文档 关于Aspose.Word控件的介绍,请戳→ 介绍 首先需要去下载这个dll文件,然后引用到你的项目当中.地 ...
- xpath模块
W3School官方文档:http://www.w3school.com.cn/xpath/index.asp 我们使用xpath主要是获取网页数据的,之前一直是使用bs4,xpath也是最近了解到的 ...
- 史上最简单的SpringCloud教程 | 第十二篇: 断路器监控(Hystrix Dashboard)
转载请标明出处: 首发于:https://www.fangzhipeng.com/springcloud/2017/07/12/sc12-hystix-dashbd/ 本文出自方志朋的博客 最新Fin ...
- Core Location :⽤用于地理定位
Core Location :⽤用于地理定位 在移动互联⽹网时代,移动app能解决⽤用户的很多⽣生活琐事,⽐比如 导航:去任意陌⽣生的地⽅方 周边:找餐馆.找酒店.找银⾏行.找电影院 在上述应⽤用中, ...
- UISearchController（使用）
效果图1 效果图2 其实一般是在第一种情况使用的UISearchController,但是第二种情况这种又懒得去用uisearchbar+uitableview等等去处理, 其实主要是对数据源的合理使 ...