用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 简单粗 ...
随机推荐
- API：Sign签名的执行流程
Sign签名存在目的:为了防止不法分子修改参数数据,进而攻击服务器,导致数据泄露或从中获得利益 例如:一个接口是用户把积分转帐给他的朋友,修改后,变为转帐到攻击者的帐户,这样,攻击者就能得到利益 ...
- 华硕主板开启intel virtual technology以便支持虚拟机
- vs2008使用mysql链接错误
原因是因为安装了64位的mysql,而开发工具室32位的,需要安装32位的开发库就可以了
- MySQL入门很简单: 14MySQL日志
二进制日志: 以二进制文件的形式记录了数据库中的操作,但不记录查询语句 错误日志: 记录MySQL服务器的启动,关闭和运行错误等信息 通用查询日志: 记录用户登录和记录查询的信息 慢查询日志: 记录执 ...
- 816 Ambiguous Coordinates (many cases problem)
https://www.cnblogs.com/Java3y/p/8846955.html -- link of the problem 816 IDEA: check the dot and int ...
- Selenium入门19 捕获异常
脚本出现异常时会中断执行,想要继续执行就要做异常处理: 1 try ... except .... else 遇到异常显示异常信息: 没有异常继续执行else后面的脚本 2 try ... exc ...
- BestCoder Round #91 1001 Lotus and Characters
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6011 题意: Lotus有nn种字母,给出每种字母的价值以及每种字母的个数限制,她想构造一个任意长度的 ...
- 第37章 基于SD卡的FatFs文件系统—零死角玩转STM32-F429系列
第37章 基于SD卡的FatFs文件系统 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.co ...
- ckplayer插件播放视频
官网:超酷网页视频 本篇介绍:插件播放视频, 添加插件(额外的功能), 视频格式之间的转换 PC端一般都是利用插件(Flash)来播放视频,可以支持很多格式.网上很多说这个插件的,这里只是做个记录 ...
- java基础 java中枚举的应用 抽象方法问题
package com.swift.meiju; import org.junit.Test; public class Demo{ @Test public void test() { System ...