您的位置：首页 > 网站优化 > css  >  纯CSS实现小箭头的案例

纯CSS实现小箭头的案例

 更新时间：2016年9月14日 14:19  点击：1546
小箭头我们许多的美工前端使用的是图片来实现了，如果我们不使用图片直接使用css要如何来实现呢，下面我们来看一篇关于纯CSS实现小箭头的方法吧，具体如下。

我们大多数的小箭头都是用小图片来做的，这里分享一款用纯CSS写的小箭头，大家可以看看，以后会放出更多的CSS小箭头来供大家参考。


<div class="pre-wrap">
    <div class="pre">
        <div class="pre1"></div>
        <div class="pre2"></div>
    </div>
</div>
<style>
 .pre-wrap {
 width: 200px;
 height: 120px;
 margin: 50px auto 0;
 border: 2px solid #F00;
 border-radius: 4px;
 position: relative;
}
.pre {
 width: 80px;
 height: 80px;
 position: absolute;
 top: 20px;
 left: 40px;
}
.pre1 {
 border-width: 40px;
 border-color: transparent #F30 transparent transparent;
}
.pre2 {
 border-width: 40px;
 border-color: transparent #FFF transparent transparent;
 position: relative;
 top: -80px;
 left: 15px;
}
.pre1, .pre2 {
 /*****设置border-style:dashed;使ie6支持border透明*****/
 border-style: dashed solid dashed dashed;
    /*****设置容器宽高为0*****/
 width: 0;
 height: 0;
 /*****去掉ie6下默认高度，设置以下属性*****/
 line-height: 0;
 font-size: 0;
 overflow: hidden;
 
}
</style>

[!--infotagslink--]

相关文章

  • Windows VPN服务器配置图文教程 超详细版

    VPN可以虚拟出一个专用网络，让远处的计算机和你相当于处在同一个局域网中，而中间的数据也可以实现加密传输，用处很大，特别是在一些大公司，分公司处在不同的区域。...2016-01-27

  • 解决执行maven命令时提示Process terminated的问题

    这篇文章主要介绍了解决执行maven命令时提示Process terminated的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • PS滤镜里为什么没有素描？PS CS6素描滤镜在哪？

    我们在作图的时候需要用到“素描”滤镜，但是点开滤镜选项就是找不到。该怎么快速找到“素描”滤镜呢？请往下看。 1、点开滤镜选项时，发现没有素描这一项。2、别急，我...2017-01-22

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • Cloudflare国内自选IP节点整理收录

    一般来说为了达到隐藏自身 IP，我们都会选择一些 CDN 服务，目前用的最多的免费 CDN 是 Cloudflare。但是正常情况下 Cloudflare 是不能自己选择IP，有时候分配给我们的 IP 可能表现不佳，也只能将就着用。但是我们都希望可以用上 CF 比较快的 IP。那么自选IP，就显得很必要了。...2022-09-23

  • Mybatis Plus select 实现只查询部分字段

    这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-01

  • MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • php file_get_contents 设置代理抓取页面示例

    file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件，如果简单的采集我们可以使用file_get_contents直接来操作，如果有防采集我们可能需要...2016-11-25

  • 解决Mybatis 大数据量的批量insert问题

    这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • mybatis-plus 表名添加前缀的实现方法

    这篇文章主要介绍了mybatis-plus 表名添加前缀的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-26

  • iOS APP h5快捷程序 .mobileconfig的生成

    1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序，文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档，管理日益增...2021-12-23

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • Redis连接池配置及初始化实现

    这篇文章主要介绍了Redis连接池配置及初始化实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-29

  • 详解如何清理redis集群的所有数据

    这篇文章主要介绍了详解如何清理redis集群的所有数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-18

  • mybatis-plus 返回部分字段的解决方式

    这篇文章主要介绍了mybatis-plus 返回部分字段的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-02

  • mybatis的Configuration详解

    这篇文章主要介绍了mybatis的Configuration详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-04

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • pandas pd.read_csv()函数中parse_dates()参数的用法说明

    这篇文章主要介绍了pandas pd.read_csv()函数中parse_dates()参数的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-05