<!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. Xcode辅助工具之热重载插件利器

    该博客首发于github.io 2018-06-13 13:43:44 文章最新修改于: 2019-03-31 13:47:20 昨天刚刚看完iOSTips微信公众号推送的文章, Injection: ...

  2. Java基础--插入排序

    直接插入排序算法 (从后往前找到合适位置插入) 基本思想:每步将一个待排序的记录,按其顺序码大小插入到前面已经排序的子序列的合适位置(从后向前找到合适位置后),直到全部插入排序完为止. 例: 34,4 ...

  3. Docker Compose + Traefik v2 快速安装， 自动申请SSL证书 http转https 初次尝试

    前言 昨晚闲得无聊睡不着觉,拿起服务器尝试部署了一下Docker + Traefik v2.1.6 ,以下是一些配置的总结,初次接触,大佬勿喷. 我的系统环境是 Ubuntu 18.04.3 LTS ...

  4. 【python pip】一招解决pip下载过慢问题

    目录 概述 壹:问题描述 贰:解决过程 一.问题分析 二.问题解决 方法一:下载时加入参数-i [镜像源地址] 方法二:设置源 三.国内镜像源地址 叁:作者有话 作者 概述 在我们经常使用pip安装插 ...

  5. 开篇词The Start以及[Vjudge][HDU2242]空调教室

    开篇 这是我写的第一篇记录好题的博客,也是博客园上我发布的第一篇博客. 以后我的所有博客都将在洛谷和博客园上同时发布,同志们有兴趣的在哪里都可以看一看. [https://www.luogu.com. ...

  6. R中的Regex

    Description grep.grepl.regexpr.gregexpr和regexec在字符向量的每个元素中搜索与参数模式匹配的参数:它们在结果的格式和详细程度上有所不同. sub和gsub分 ...

  7. Drf（DjangoRestFramewok）

    第一部分 问题 1.前后端分离? vue.js 后端给前段返回json数据 2.移动端盛行. app 后端给app返回json数据 3.PC端应用? crm项目,前段后端一起写,运行在浏览器上. 一般 ...

  8. Docker基本概念及架构

    一.Docker基本概念 Docker是一个开源的容器引擎,基于Go 语言并遵从 Apache2.0 协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布 ...

  9. 创建和存储 cookie

    在这个例子中我们要创建一个存储访问者名字的 cookie.当访问者首次访问网站时,他们会被要求填写姓名.名字会存储于 cookie 中.当访问者再次访问网站时,他们就会收到欢迎词. 首先,我们会创建一 ...

  10. Python基础篇(二)_基本数据类型

    Python基础篇——基本数据类型 数字类型:整数类型.浮点数类型.复数类型 整数类型:4种进制表示形式:十进制.二进制.八进制.十六进制,默认采用十进制,其他进制需要增加引导符号 进制种类 引导符号 ...