<!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. 浪潮服务器I4008/NX5480M4介绍

    浪潮I4008 / NX5480M4是一款高密度模块化服务器. I4008是机箱,NX5480M4是节点. 8个计算节点模块可以部署在标准机架4U高度机器里,具有高性能.低功耗.易维护.组管理功能.适 ...

  2. XML详解二XML的解析与创建

    XML用来传输和存储数据,如何解析获取到的XML文本呢? 一.解析XML 创建demo.xml文件: <?xml version="1.0" encoding="U ...

  3. 数据库【mysql篇】典型的一些练习题目

    班级表 class 学生表student 老师表 teacher 课程表course 成绩表 score 准备数据 创建数据库 create database tang_test charset='u ...

  4. 抽象类练习（Job和TestJob）

    package com.Summer_0427.cn; /** * @author Summer * 根据抽象类完成以下题目 * 某软件公司对程序员的工作有一个总体的规定, * 不同的类型的程序员可以 ...

  5. C# Json字符串保存信息

    1.我们在进行数据通信的时候,往往是需要传输一个字符串类型的参数,而这个字符串类型的参数又需要封装大量的数据信息. 这个时候,就需要使用Json来封装这些数据,最后将Json数据以字符串的格式输出 2 ...

  6. Linux内存管理 (21)OOM

    专题:Linux内存管理专题 关键词:OOM.oom_adj.oom_score.badness. Linux内核为了提高内存的使用效率采用过度分配内存(over-commit memory)的办法, ...

  7. WPF防止界面卡死并显示加载中效果

    原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...

  8. React16.x特性剪辑

    本文整理了 React 16.x 出现的耳目一新的概念与 api 以及应用场景. 更多 React 系列文章可以订阅blog 16.0 Fiber 在 16 之前的版本的渲染过程可以想象成一次性潜水 ...

  9. JAVA获取计算机CPU、硬盘、主板、网络等信息

    通过使用第三方开源jar包sigar.jar我们可以获得本地的信息 1.下载sigar.jar sigar官方主页 sigar-1.6.4.zip 2.按照主页上的说明解压包后将相应的文件copy到j ...

  10. OpenStack-Storage（6）

    一. DAS/NAS/SAN 1.存储分类 (1)内置存储 (2)外挂存储 DAS (DirectAttached Storage):直连式存储 FAS (FabricAttached Storage ...