<!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. js判断PC端还是移动端的代码小坑

    我在写官网的时候做了pc和移动端两个,在通过网上查找了这样的代码,看着完全没问题,等放进去页面中后,PC端页面一直刷新,根本停不下来,找了类似js还是同样的问题.通过不断尝试后才发现,问题就是多了一行 ...

  2. LeetCode 81.Search in Rotated Sorted Array II(M)

    题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...

  3. 使用EventBus + Redis发布订阅模式提升业务执行性能(下)

    前言 上一篇博客上已经实现了使用EventBus对具体事件行为的分发处理,某种程度上也算是基于事件驱动思想编程了.但是如上篇博客结尾处一样,我们源码的执行效率依然达不到心里预期.在下单流程里我们明显可 ...

  4. python自动化第二课 - python基础2

    1.判断奇数偶数 num = input("请输入一个数字,判断是否为偶数:") print(not int(num) % 2) 2.浮点数的高精度计算用Decimal(from ...

  5. WEB渗透 - XSS

    听说这个时间点是人类这种生物很重要的一个节点 cross-site scripting 跨站脚本漏洞 类型 存储型(持久) 反射型(非持久) DOM型 利用 先检测,看我们输入的内容是否有返回以及有无 ...

  6. Fabric 源码学习：如何实现批量管理远程服务器？

    前不久,我写了一篇<Fabric教程>,简单来说,它是一个用 Python 开发的轻量级的远程系统管理工具,在远程登录服务器.执行 Shell 命令.批量管理服务器.远程部署等场景中,十分 ...

  7. go package 学习笔记 —— strconv（string与其他基本数据类型(int, float, bool)的转换）

    strconv实现了go中基本数据类型与string之间的转换. How to use in go go doc:https://godoc.org/strconv import "strc ...

  8. [JS]使用JavaScript实现简易俄罗斯方块

    [JS]使用JavaScript实现简易俄罗斯方块 首先,大家可以点击此处来预览一下游戏效果,随后将会以此为模板讲解如何使用JavaScript实现这样一个简易的俄罗斯方块项目(以下简称"该 ...

  9. 11.C++ 动态内存管理

    在dll中malloc的内存, 必须要在dll中free掉,否则无法编译通过 //dll文件 #include <stdio.h> #include <iostream> #d ...

  10. flask连接数据库的URI书写格式

    1. MySQL mysql://username:password@hostname/database 2. PostgreSQL postgresql://username:password@ho ...