<!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. ES6的原始类型数据——Symbol

    javascript中原始值,即基本数据类型,像Number,String,Boolean,undefined,Null都是基本类型值,保存在栈中,但是有个疑问: Symbol打印出来明明是个函数,具 ...

  2. Vue父子组件通讯

    我们知道,父组件不能修改子组件的数据[这种说法是不严谨的],严谨的说法是:子组件内部不能修改从父组件传递过来的值.原因是vue遵循的是数据单向流原则,父组件传递数据给子组件只能单向绑定,通过Props ...

  3. SpringBoot——Cache使用原理及Redis整合

    前言及核心概念介绍 前言 本篇主要介绍SpringBoot2.x 中 Cahe 的原理及几个主要注解,以及整合 Redis 作为缓存的步骤 核心概念 先来看看核心接口的作用及关系图: CachingP ...

  4. 10.xadmin后台使用管理

    目录 xadmin后台管理 xadmin后台管理 安装:luffy虚拟环境下 >: pip install https://codeload.github.com/sshwsfc/xadmin/ ...

  5. Java多线程并发03——在Java中线程是如何调度的

    在前两篇文章中,我们已经了解了关于线程的创建与常用方法等相关知识.接下来就来了解下,当你运行线程时,线程是如何调度的.关注我的公众号「Java面典」了解更多 Java 相关知识点. 多任务系统往往需要 ...

  6. Python进阶学习之面向对象

    目录 面向对象 私有属性 面向对象   python也有面向对象的编程,它与C++中的类有点相似.它也只是运算符重载,继承. class Test: num=0 def __init__(self): ...

  7. Angular介绍

    Angulay介绍 1.介绍:是一个用于Html和TypeScript构建客户端应用平台与框架.Angular 本身就是用 TypeScript 写成的.基本构造块是 NgModule,它为组件提供了 ...

  8. javaScript 基础知识汇总 （十）

    1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...

  9. asp.net c# 通过消息队列处理高并发请求（以抢小米手机为例）

    网站面对高并发的情况下,除了增加硬件, 优化程序提高以响应速度外,还可以通过并行改串行的思路来解决.这种思想常见的实践方式就是数据库锁和消息队列的方式.这种方式的缺点是需要排队,响应速度慢,优点是节省 ...

  10. Natas22 Writeup（header重定向、burp截取抓包）

    Natas22: 打开页面是一个空白页面,查看源码,看起来好像是需要我们在url中添加“revelio”参数即可,然而实验了之后发现浏览器跳转回了原来的页面. 再次仔细审计源码,会看到页面开头有一个重 ...