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

在开始前,你要知道如何用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. Selenium入门9 上传文件

    上传文件步骤 1 找到文件上传的input标签  find_element_by_css_selector("input[type='file']") 2 用send_keys传入 ...

  2. IOS中 copy ,strong ,weak ,assign使用区别

      .@property属性的用法 * weak(assign) :  代理\UI控件 * strong(retain) : 数组.模型)其他对象(除代理\UI控件\字符串以外的对象) * copy ...

  3. log4net 简单配置

    <configSections> <section name="log4net" type="log4net.Config.Log4NetConfigu ...

  4. Linux高性能server编程——定时器

    版权声明:本文为博主原创文章.未经博主允许不得转载. https://blog.csdn.net/walkerkalr/article/details/36869913  定时器 服务器程序通常管 ...

  5. 【CCPC-Wannafly Winter Camp Day4 (Div1) C】最小边覆盖(简单题)

    点此看题面 大致题意: 给你一个边集的子集,问你这可不可能是这张图的最小边覆盖. 大致思路 考虑到,如果一条边连接的两个点度数都大于等于\(2\),则这条边完全可以删去. 因此,我们只要判断是否存在这 ...

  6. 【HHHOJ】ZJOI2019模拟赛(十五)03.17 解题报告

    点此进入比赛 得分: \(42+10+14=66\) 排名: \(Rank\ 3\) \(Rating\):\(+53\) \(T1\):[HHHOJ200]稗田的梦中之梦(点此看题面) 暴力\(DF ...

  7. VPS 运行 Node.js 的一些经验

    VPS 系统选择 各系统安装难易对比 Ubuntu.Debian 较为简单,CentOS 稍麻烦,32位系统比64位更节省内存 DigitalOcean 甚至推出了 Ubuntu + Node.js ...

  8. 阿里数据库连接池druid

    官方wiki: https://github.com/alibaba/druid/wiki 实用方法介绍的想当详细,包含监控.扩展.大力推荐!

  9. C#流程控制语句

    C#流程控制语句 一.选择语句 当程序中需要进行两个或两个以上的选择时,可以根据条件的判断来选择将要执行的一组语句. ?if语句 ?switch语句 二.循环语句 循环语句是对一个程序模块进行的重复操 ...

  10. C#中this保留字的用法

    一.this保留字 this保留字一般只在构造函数.类的方法和类的实例中使用.它有以下含义: ?在类的构造函数中出现的this,则作为一个值类型,表示对正在构造的对象本身的引用. ?在类的方法中出现的 ...