<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>鼠标经过灰色区域出现黑色三角</h1>
<div><a href="javascript:void(0);"></a></div>
<style>
div{ display: block; height: 30px; background:#ccc; }
div a{ display: block; width:50px; height: 30px; position: relative; }
div:hover a:after{
content:'';
display:block;
border-style:solid;
border-width:0px 6px 6px 6px;
border-color:#000 transparent;
position:absolute;
left:50%;
bottom:0;
margin-left:-6px;
}
</style>
</body>
</html>

巧用border制作箭头的更多相关文章

  1. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

  2. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  3. css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...

  4. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  5. CSS--使用伪选择器制作箭头图标

    // 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式: HTML <section class="main&quo ...

  6. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  7. CorelDRAW教程：怎样绘制制作箭头流程图？

    箭头流程图主要由矢量图和连接符组成,通过图形之间的顺序阐述的一个过程,应用也是非常广泛,有些软件中会自带流程图,对于CDR这款矢量绘图软件来说,手动制作流程图是简单且高效的.首先CorelDRAW中就 ...

  8. 用CSS制作箭头的方法

     一.箭头产生的原理 #demo12 { border: 100px solid; border-color:green blue orange red; width:100px; height:10 ...

  9. 巧用border效果

    目的: 我们在做css的时候为了提高网站的效率减少服务器请求,我们可以通过css来实现一些简单的图片特效,比如说三角形,这篇文章讲解的是通过边框实现不同的效果. 上面样式部分代码: <style ...

随机推荐

  1. Enterprise Architect 时序图

    添加时序图 1,在类图下面新建包 添加sequence时序图 点击流程控制,可以打开流程控制设计界面 我选择的是Lifeline线,你可以选择都差不多. 点击其中一条liftline连到其他上面 双击 ...

  2. .net 信息采集ajax数据

    .net 信息采集ajax数据 关于.net信息采集的资料很多,但是如果采集的网站是ajax异步加载数据的模式,又如何采集呢?今天就把自己做信息采集时,所遇到的一些问题和心得跟大家分享一下. 采集网站 ...

  3. 基于 HTML5 的 3D 工业互联网展示方案

    前言 通用电气(GE).IBM.英特尔等公司主推的“工业互联网”正在经历“产品-数据分析平台-应用-生态”的演进.这主要得益于 Predix 数据分析平台对工业互联网应用的整合能力.Predix 就像 ...

  4. IL指令表

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  5. Gerrit 添加用户

    使用ssh添加用户 ssh name@localhost -p 29418 gerrit create-account username --email username@email --full-n ...

  6. ORA-01578 data block corrupted 数据文件损坏 与 修复 (多为借鉴 linux)

    好吧,先说说造成崩溃的原因: 使用redhat 5.9 Linux 作为数据库服务器, 周五数据库正在使用中,硬关机造成数据库文件部分损坏(周一上班时,应用程序启动不起来,查看日志文件时,发现一个数据 ...

  7. 用bisect维护一个排序的序列

    import bisect list1 = [] bisect.insort(list1, 5) bisect.insort(list1, 1) bisect.insort(list1, 3) bis ...

  8. 用Python开发小学二年级口算自动出题程序

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 武汉光谷一小二年级要求家长每天要给小孩出口算题目,让孩子练习. 根据老师出题要求编写了Python程序 ...

  9. vue mock自己总结

    cli安装mock模块 npm   install  mockjs 创建mock文件夹 配置及创建文件 当后端写好真实接口以后,我们只需删掉创建的mock.js文件和在main.js中导入假数据的那行 ...

  10. C# Note35: 异步操作

    .NET Framework 为异步操作提供了两种设计模式:使用 IAsyncResult 对象的异步操作与使用事件的异步操作. IAsyncResult 异步设计模式 通过名为 BeginOpera ...