现在让我们开始制作箭头吧！

在开始前，你要知道如何用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">&nbsp;</div>

效果图：

 

这个例子，我们可以更好的理解边框了。

用CSS伪元素制作箭头的更多相关文章

  1. CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素

    CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...

  2. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

  3. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  4. css 伪元素分享！！！

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  5. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  6. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  7. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

  8. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  9. js如何控制css伪元素内容（before，after）

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

随机推荐

  1. CentOS6.5手动升级gcc4.8.2

    一.简易安装 操作环境 CentOS6.5 64bit,原版本4.4.7,不能支持C++11的特性~,希望升级到4.8.2 不能通过yum的方法升级,需要自己手动下载安装包并编译 本文记录了在Cent ...

  2. Flashing Fluorescents(状压DP)

    Flashing Fluorescents 时间限制: 1 Sec  内存限制: 128 MB提交: 56  解决: 19[提交] [状态] [讨论版] [命题人:admin] 题目描述 You ha ...

  3. aop 和castle 的一些 学习文章

    https://www.cnblogs.com/zhaogaojian/p/8360363.html

  4. Win10远程桌面连接树莓派3时出现错误：由于安全设置

    http://blog.csdn.net/qq_33259138/article/details/52143407 在远程其树莓派时的电脑时提示错误“客户端无法建立与远程计算机的连接,远程计算机可能不 ...

  5. Python——并发编程

    开始说并发编程之前,最好有一定的底层知识积累,这里我把需要的知识总结了一下,如果看下面的有不理解的可以看一下:https://www.cnblogs.com/kuxingseng95/p/941820 ...

  6. 微信小程序开发踩坑与总结 -

    原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...

  7. Struts2基础学习2

    Struts2基础学习2 项目结构,测试页面与实体类 <%@ page language="java" contentType="text/html; charse ...

  8. Xtrabackup实现MySQL备份

    一.xtrabackup介绍 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写)它由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上 ...

  9. anaconda+jupyter notebook 安装配置

    安装Anaconda 从清华大学开源软件镜像站选择合适自己的版本 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda ...

  10. php解决sql_server连接问题

    1.首先根据phpinfo()查看当前php版本以及线程安全情况(ts或者nts):2.下载sqlsrv扩展(适用32位php) 下载链接为https://www.microsoft.com/en-u ...