<!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. chrome总是提示“请停用开发者模式运行的扩展程序”

    方法1:通过组策略的扩展白名单.要下载一个组策略管理模板 1.开始 -> 运行 -> 输入gpedit.msc -> 回车确定打开计算机本地组策略编辑器(通过Win + R快捷键可以 ...

  2. Eclipse编程中免除alt+斜杠，设置自动提示

    用eclipse进行编程时,设置自动提示 .abcdefghijklmnopqrstuvwxyz@

  3. 【Python实战】使用Python连接Teradata数据库？？？未完成

    1.安装Python 方法详见:[Python 05]Python开发环境搭建 2.安装Teradata客户端ODBC驱动 安装包地址:TTU下载地址 (1)安装TeraGSS和tdicu(ODBC依 ...

  4. k8s--如何使用Namespaces

    Namespaces 使用示例 Viewing namespaces Creating a new namespace Deleting a namespace Subdividing your cl ...

  5. git添加/删除远程仓库

    注意:仓库只有管理员建的你才有权限上传,不然自己建的也没用,没权限上传 1.远程仓库路径查询 git remote -v 2.添加远程仓库 git remote add origin <你的项目 ...

  6. F. Multicolored Markers（数学思维）

    思维:思维就是将大的矩形放在小矩形里面,让大矩形的宽和长尽量靠近. 很容易得到 (a+b)% i = 0 的话, 保证了大矩形的形成,同时里面表示了两种情况:1, a % i =0, b % i=0; ...

  7. Java面试准备之IO

    Java IO Java IO 分类 Java BIO: 同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线 ...

  8. 面试3——java集合类总结（Set）

    Set 集合 和List一样,继承Collection接口,不同的是Set中不能包含重复的元素,无序,并且最多只能允许一个null值.Set常见的实现类有:HashSet.TreeSet和Linked ...

  9. 虽然不抱希望但也愿.Net和Java之争暂得平息

    我在刚开始学编程的时候就经常来博客园,当时博客园基本是.Net的天下,从那时开始.Net和Java哪个好就一直在打,这些年没怎么看博客园了,回来发现到了今天居然还在争论,让我不由得想来分析一下这个问题 ...

  10. Golang 入门 : 切片(slice)

    切片(slice)是 Golang 中一种比较特殊的数据结构,这种数据结构更便于使用和管理数据集合.切片是围绕动态数组的概念构建的,可以按需自动增长和缩小.切片的动态增长是通过内置函数 append( ...