<!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. 37个JavaScript基本面试问题和解答

    1.使用typeof bar ==="object"来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免? 尽管typeof bar ==="object&qu ...

  2. python——字符串截取

    str = ‘0123456789’ print str[0:3] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 print str[6:] #截取第七个字符到结尾 p ...

  3. vijos 1449 字符串还原

    背景 小K是一位蔚蓝教主的崇拜者(Orz教主er),有一天,他收到了一封匿名信,信告诉了小K由于他表现出色,得到了一次当面Orz教主的机会,但是要当面Orz教主可不那么容易,不是每个人都有资格Orz教 ...

  4. php -v 找不到命令

    [root@localhost htdocs]# php -v -bash: php: command not found export PATH=$PATH:/usr/local/php7/bin ...

  5. Redis系列四 - 分布式锁的实现方式

    前言 分布式锁一般有3中实现方式: 数据库乐观锁: 基于Redis的分布式锁: 基于ZooKeeper的分布式锁. 以下将详细介绍如何正确地实现Redis分布式锁. 可靠性 首先,为了确保分布式锁的可 ...

  6. SQL中rownumber的用法

    1)一次排名: 语法:row_number() over(order by 字段 desc/asc):按照某个字段排名 1.1.查询语句: 1.2.查询结果:查询结果按照薪水进行排名 2)先分组后排名 ...

  7. Python只有文件不存在才能写文件

    当我们在Python里面写文件时,我们常用的模式为 w模式,这种模式下,如果文件不存在,就会生成文件:如果文件已经存在,就会直接覆盖. 有时候,如果文件已经存在,直接覆盖文件可能会导致重要数据丢失.你 ...

  8. celery订单定时回滚

    目录 订单回滚 控制执行(多少时间后执行) celery异步定时任务 订单回滚 用celery异步,定时任务.可以设置:如果下单15分钟后没有支付,则取消订单.做反向操作 控制执行(多少时间后执行) ...

  9. 13.浏览器屏幕缩放bug修复

    目录 问题:浏览器缩放时,轮播图显示不全,滚动水平滚动条,发现图片缺失 解决:隐藏水平滚动条,页面都只提供垂直滚动条的需求 问题:浏览器缩放时,轮播图显示不全,滚动水平滚动条,发现图片缺失 解决:隐藏 ...

  10. 使用MySql对IdentityServer4进行持久化

    哈喽大家好,看见网上很少有使用MySql进行持久化的,毕竟又很多坑,说句实话,就连 MySql.Data.EntityFrameworkCore 都有问题,不知道是.net core更新太快还是其它的 ...