<!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指示箭头两种实现方法的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  3. git两种合并方法 比较merge和rebase

    18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...

  4. 两种Ajax方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

  5. mysql in 的两种使用方法

    简述MySQL 的in 的两种使用方法: 他们各自是在 in keyword后跟一张表(记录集).以及在in后面加上字符串集. 先讲后面跟着一张表的. 首先阐述三张表的结构: s(sno,sname. ...

  6. C#中的两种debug方法

    这篇文章主要介绍了C#中的两种debug方法介绍,本文讲解了代码用 #if DEBUG 包裹.利用宏定义两种方法,需要的朋友可以参考下   第一种:需要把调试方法改成debug代码用 #if DEBU ...

  7. Service的两种启动方法

    刚才看到一个ppt,介绍service的两种启动方法以及两者之间的区别. startService 和 bindService startService被形容为我行我素,而bindService被形容 ...

  8. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  9. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. flask之三：视图高级

    视图高级 app.route和app.add_url_rule app.add_url_rule app.add_url_rule('/list/',endpoint='myweb',view_fun ...

  2. 前端每日实战：20# 视频演示如何用纯 CSS 为母亲节创作一颗像素画风格的爱心

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教程 此视频 ...

  3. OC和C++混编需要注意的问题

    文章首发于github.io 2018-12-17 21:01:55 方案一 1. .c文件的identify and type右边栏修改为Objective-C source 2. Built se ...

  4. Pycharm IDE安装及注册激活笔记（1）

    一.Windows 下的安装及激活. 1.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=window ...

  5. 开源字体不香吗？五款 GitHub 上的爆红字体任君选

    作者:HelloGitHub-ChungZH 在编程时,用一个你喜欢的字体可以大大提高效率,越看越舒服.这篇文章就推荐 5 个在 GitHub 上优秀的字体供大家选择吧! 1. Iosevka 网站: ...

  6. 28 复杂的使用Specification查询

    /** * Specification的多表查询 */ @Test public void testFind() { Specification<LinkMan> spec = new S ...

  7. Oracle学习笔记--Oracle启动过程归纳整理

    Oracle 启动过程分为nomount状态mount状态open状态 每个状态下Oracle都会进行不同的操作:1.nomount状态 在$ORACLE_HOME/dbs目录下寻找参数文件 参数文件 ...

  8. CSS 权重图

    关系图 图片出处我找不到了. 结论 权重从高到低排序 1. !important 2. style 3. #id 4. .class .child-class 5. .class1.class2 6. ...

  9. MVC项目中存储公用链接方法

    小白成长记第一篇,随手记录一下小常识 将固定地址写在web.config文件appSettings中 Controller调用方法:

  10. lesson01

    题目: Action3:  统计全班的成绩 班里有5名同学,现在需要你用numpy来统计下这些人在语文.英语.数学中的平均成绩.最小成绩.最大成绩.方差.标准差.然后把这些人的总成绩排序,得出名次进行 ...