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. Apache rewrite

    Apache rewrite mod_rewrite简介和配置 实URL跳转隐藏真实地址 拟目录 域名跳转 防止盗链 Apache配置支持httpd.conf配置.htaccess配置 启用rewri ...

  2. RStudio技巧01_美化RStudio的帮助页面

    R中的package及其函数实在太多,经常遇到不会使用或者忘记如何使用的的package和函数,所以总会查阅帮助文档,在Rstudio中提供了专门的help面板,当遇到不懂的package或者函数时只 ...

  3. python中threading的用法

    摘自:http://blog.chinaunix.net/uid-27571599-id-3484048.html 以及:http://blog.chinaunix.net/uid-11131943- ...

  4. wampserver的安装以及使用

    一.点击wampserver.exe默认安装 二.安装成功之后测试        (1)测试基本配置         浏览器地址栏输入http://localhost/index.php       ...

  5. bzoj3212 pku3468 A Simple Problem with Integers

    一个有初值的数列.区间加.区间查 用线段树直接水过 然而并没有1A,主要是做题太快没看规模结果没注意线段树要用longlong建 卧槽怎么可以这么坑爹,害得我看见wa心慌了,还以为连线段树都要跪 一开 ...

  6. Django入门2

    Django模板简单实例 上篇中将html写在了views中,这种混合方式(指Template和views混在一起)不适合大型开发,而且代码不易管理和维护,下面就用Django自带的模板来学习(显示一 ...

  7. NOIP2014初赛分数线及金华上线名单

    NOIP2014初赛分数线及金华上线名单 分数线:提高组81.5,普及组93 这分数线还能再高些吗?悲催的浙江. 金华上线普及组名单: 地市 姓名 学校 年级 参赛语种 成绩 金华 成浩鹏 稠州丹溪校 ...

  8. Struts2_ValueStack,OGNL详解（转）

    原文地址:http://blog.csdn.net/wyply115/article/details/8257140 一.OGNL表达式 1.ognl是struts2中使用的一种表达式语言,可用于js ...

  9. Unity学习疑问记录之界面适配

    Unity3d UGUI 界面适配 实例解析 三种适配方式 http://www.mamicode.com/info-detail-475563.html

  10. mysql删除重复记录，保存Id最小的一条

    方法1:1.创建一个临时表,选取需要的数据.2.清空原表.3.临时表数据导入到原表.4.删除临时表.mysql> select * from student;+----+------+| ID ...