css指示箭头两种实现方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div {
width: 200px;
height: 100px;
margin: 30px;
background-color: orange;
position: relative;
}
.box1:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 100%;
border: solid transparent;
border-width: 30px;
margin-left: -30px;
border-top-color: orange;
}
.box2:before {
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 100%;
left: 50%;
margin-left: -30px;
background: linear-gradient(45deg, transparent 0, transparent 50%, orange 50%, orange 50%, orange 100%) left top / 50% 50% no-repeat,
linear-gradient(315deg, transparent 0, transparent 50%, orange 50%, orange 50%, orange 100%) right top / 50% 50% no-repeat;
}
</style>
<body>
<h3>css指示箭头两种实现方法：</h3>
<h5>1、通过border属性实现（兼容至IE9）, 参考网站：<a href="http://www.cssarrowplease.com/" target="_blank">http://www.cssarrowplease.com/</a></h5>
<div class="box1"></div>
<h5 style="margin-top: 100px;">2、通过background-image属性的线性渐变函数实现（兼容至IE10）</h5>
<div class="box2"></div>
</body>
</html>
css指示箭头两种实现方法的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- git两种合并方法 比较merge和rebase
18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...
- 两种Ajax方法
两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...
- mysql in 的两种使用方法
简述MySQL 的in 的两种使用方法: 他们各自是在 in keyword后跟一张表(记录集).以及在in后面加上字符串集. 先讲后面跟着一张表的. 首先阐述三张表的结构: s(sno,sname. ...
- C#中的两种debug方法
这篇文章主要介绍了C#中的两种debug方法介绍,本文讲解了代码用 #if DEBUG 包裹.利用宏定义两种方法,需要的朋友可以参考下 第一种:需要把调试方法改成debug代码用 #if DEBU ...
- Service的两种启动方法
刚才看到一个ppt,介绍service的两种启动方法以及两者之间的区别. startService 和 bindService startService被形容为我行我素,而bindService被形容 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
- elasticsearch 创建索引
一.基本概念 索引:含有相同属性的文档的集合. //可以想象成一个数据库 database 类型:索引可以定义一个或多个类型,文档必须属于一个类型. //可以想象成数据库中的表 table 文档:文档 ...
- 一起了解 .Net Foundation 项目 No.18
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Protobuild Pr ...
- Numpy之数据保存与读取
在pandas使用的25个技巧中介绍了几个常用的Pandas的使用技巧,不少技巧在机器学习和深度学习方面很有用处.本文将会介绍Numpy在数据保存和读取方面的内容,这些在机器学习和深度学习方向也大 ...
- ES6中的Promise使用总结
One.什么是Promise? Promise是异步编程的解决方案,而它本身也就是一个构造函数,比传统的异步解决[回调函数]和[事件]更合理,更强大. Two.Promise有何作用? 作用:解决回调 ...
- MATLAB神经网络（6） PID神经元网络解耦控制算法——多变量系统控制
6.1 案例背景 6.1.1 PID神经元网络结构 PID神经元网络从结构上可以分为输入层.隐含层和输出层三层,$n$个控制量的PID神经元网络包含$n$个并列的相同子网络,各个子网络间既相互独立,又 ...
- Java反射之成员方法的反射
上一篇介绍了Java反射之成员变量的反射,这次介绍成员方法的反射. [一]Method类 Method类中封装了所有java方法的属性,包括该方法是否私有,该方法的修饰符,返回值,参数,抛的错误等等. ...
- 测试必知必会系列- Linux常用命令 - tar
21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 压缩一 ...
- iviewadmin url 加入 Router base #viewDesignAdmin
router/index.js const router = new Router({ routes, base: '/viewDesignAdmin/', mode: 'history' ...
- 集群搭建_02_集群多机版安装 HDFS HA+Federation-YARN
1.配置hosts 至少四个节点(机器) 每个节点的hosts文件都要配置这些 10.10.64.226 SY-0217 10.10.64.234 SY-0225 10.10.64.235 SY-02 ...
- Fast and accurate bacterial species identification in urine specimens using LC-MS/MS mass spectrometry and machine learning （解读人：闫克强）
文献名:Fast and accurate bacterial species identification in urine specimens using LC-MS/MS mass spectr ...