demo

 
 
<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset=utf-8>

<title>demo</title>

</head>

<style>

#demo{

  width:100px;

  height:100px;

  border:2px solid #000;

}

#demo:before{

  content:'';

  display:block;

  width:0;

  height:0;

  position:relative;

  top:10px;

  left:100px;

  border-left:9px solid #000;

  border-top:7px solid transparent;

  border-bottom:7px solid transparent;

}

#demo:after{

  content:'';

  display:block;

  width:0;

  height:0;

  position:relative;

  top:-2px;

  left:100px;

  border-left:7px solid #fff;

  border-top:5px solid transparent;

  border-bottom:5px solid transparent;

}

#s{

  width:0;

  height:0;

  border-left:20px solid transparent;       /*→*/

  border-right:20px solid transparent;      /*←*/

  border-top:20px solid transparent;        /*↓*/

  border-bottom:20px solid green;           /*↑*/

}

</style>

<body>

   <div id='demo'></div>

   <div id="s"></div>

</body>

</html>

css实现三角效果的更多相关文章

  1. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  2. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

  3. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  4. 追求极致--纯css制作三角、圆形按钮，兼容ie6

    参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  5. CSS3 @font-face实现颜色大小可控的三角效果——张鑫旭

    一.我之前介绍过的三角实现效果回顾 这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我早 ...

  6. 使用css实现三角符号

    关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...

  7. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  8. css实现三角箭头（兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  9. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. 【Cocos2d-x游戏开发】Cocos2d-x中的数据存储技术

    一.引言 数据存储和网络功能可以说是一款游戏中必不可少的功能,如果一款游戏不能保存进度那么它的可玩性必然大打折扣(试想一下,玩家辛辛苦苦玩了一整天的游戏,结果退出时告诉人家不能保存关卡信息,你明天还得 ...

  2. Spring3：AOP

    AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...

  3. Jquery_类选择器笔记

    $("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择

  4. 大数据技术Hadoop入门理论系列之一----hadoop生态圈介绍

    Technorati 标记: hadoop,生态圈,ecosystem,yarn,spark,入门 1. hadoop 生态概况 Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用 ...

  5. [ZZ] A Proposal For Compiling Direct3D HLSL With LLVM (Written by Michael Larabel )

    http://www.phoronix.com/scan.php?page=news_item&px=OTI2NA Note:  Something very instersting to w ...

  6. centos6修改nameserver

    1.直接修改/etc/resolv.conf,重启网卡 #service network restart 后发现并没有修改掉 2.直接修改ifcfg-eth0文件 /etc/sysconfig/net ...

  7. JDBC的使用（一）：引用外部jar；代码链接数据库

    一:引用外部jar 1.首先不jar文件放到项目下: 2.在Eclipse中,右键相应的项目--构建路径--配置构建路径--库--添加外部jar:选中-打开-应用-确定. 二:代码链接数据库 1.加载 ...

  8. Nodejs：Glob对象

    模块Glob: glob主要用处为筛选文件 API样例: var globInstance = new glob.Glob("@(a|a1|b).js",{nonull:true, ...

  9. 关于Fekit的安装与测试

    一. Fekit的安装 1.cmd输入指令 $ npm install fekit -g 2.初始化方法 $ fekit init 3.创建本地服务 $ fekit server 4.创建同时改端口( ...

  10. 如何给main传参数

    main 函数的参数有连个argc argcv[]  argc 是参数个数 argcv是参数的数组指针,且argcv的第一个参数是默认程序路径加程序名 给main传参数,需要在命令行启动程序时设置 如 ...