很久之前收集的,忘记出处了。

1.梯形: 当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形;
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;

2.三角形:当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。
border: 10px solid #000;
border-left-color: #f00;
width: 0;
height: 0;

3.任意角度的三角形
border: 10px solid transparent;
border-left: 20px solid #f00;
width: 0;
height: 0px;

4.通过伪元素实现
<span id="demo15">文字内容</span>
#demo15{
position: relative;
}
#demo15:after {
border: 10px solid transparent;
border-left: 10px solid #f00;
width: 0;
height: 0;
position: absolute;
content: ' '
}

5.伪元素实现三角线箭头 > :通过伪元素绘制出的两个,一个与背景色相同覆盖部分红色箭头, 形成三角线。
#demo16{
position: relative;
}
#demo16:after, #demo16:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -20px;
content: ' '
}

#demo16:before {
border-left-color: #f00;
right: -21px;
}

6.三角形和矩形组合成提示框
#demo {
width: 100px;
height: 100px;
background-color:
position: relative;
border: 4px solid #333;
}

#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 9px;
border-left-color: #ccc;
top: 15px;
}
#demo:before {
border-width: 14px;
border-left-color: #333;
top: 10px;
}

纯css实现箭头的更多相关文章

  1. 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)

    <style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...

  2. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  3. 纯CSS 箭头流程,网上找的,留着备用

    无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...

  4. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  5. 【技能】使用纯CSS+html写出方向箭头,简单慷慨,好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  6. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  7. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  8. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  9. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

随机推荐

  1. 02 ArcPython的使用大纲

    一.什么情况下使用ArcPython? 1.现有工具实现不了,可以用python 2.流程化需要时,可以使用python 3.没有AE等二次开发环境 4.其他特殊场景 二.ArcPython在ArcG ...

  2. Matlab中界面和注释---中英文切换问题

    有参考网页后实践的心得: Matlab中界面和注释---中英文切换问题 网上有大把的方法,并不是一一有效,这里介绍一种比较简单的方法我自己的电脑挺好用的,大家的电脑matlab需要你们自己实验了. 1 ...

  3. Centos最小化安装后,不能使用yum命令的解决办法

    刚刚最小化方式安装了CentOS 7 后,想查看一下config,却发现没有config文件,就想用yum下载一个,但是发现yum不能正常工作!!! 一,输入安装X Window命令,安装出错!! 在 ...

  4. Java 生态碎片化 和 .NET生态的一致性

    .NET Core是以MIT协议开源, Java是GPL协议开源.Java 8 SDK升级Oracle要收费这件事对于很多小公司是有着重大的影响的,Java生态越发碎片化,有众多的OpenJDK发行版 ...

  5. JVM性能调优(3) —— 内存分配和垃圾回收调优

    前序文章: JVM性能调优(1) -- JVM内存模型和类加载运行机制 JVM性能调优(2) -- 垃圾回收器和回收策略 一.内存调优的目标 新生代的垃圾回收是比较简单的,Eden区满了无法分配新对象 ...

  6. shell-变量的字串应用技术

    1. 变量子串的常用操作 常用操作如下表: 依次举例说明: 定义aa变量,内容为"I am scajy" [root@1-241 script]# aa="I am sc ...

  7. ubuntu19.10 系统需要安装的软件

    将ubuntu18 升级到ubuntu19 期间好几次卡在启动界面,比较担心要不要重装系统,有幸后来正常了.明显感觉操作快了不少.下半年稳定版就出来,到时候免不了再折腾一番,提前把安全记录做好. 下面 ...

  8. sessionFactory' defined in class path /mappingDirectoryLocations配置问题

    问题:配置好aplicationContext.xml,启动tomcat 出现如下问题 sessionFactory无法正常建立 Context initialization failed org.s ...

  9. 多测师讲解python_oo1基本操作

    1.什么是Python? Python是一门面向对象,解释型的动态类型的编程语言,有Guido van Rossunm于1989年发明,第一个公开发行版发行于1991年: Guido van Ross ...

  10. day18 Pyhton学习 内置函数最后七个

    1. enumerate  枚举函数 for i in enumerate(['a','b','c'],1): print(i)#(1, 'a')(2, 'b')(3, 'c') goods_lst= ...