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. ios 单例设计模式

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类.单例可用性非常高,用于登录用户管理等可供全局调用. + (AccountMa ...

  2. Hive_数据倾斜处理

    Hive中三种join map join (小表join大表,将小表加入到内存) 设置map join: hive.auto.convert.join=true hive.mapjoin.smallt ...

  3. win10启动无法进入桌面

    情况: windows启动显示欢迎界面 无法进入桌面(可以win+E进入资源管理器,可以ctl+alt+delete进入任务管理器) 重启依然无法进入 解决: 重启 按f8 进入安全模式 再次重启OK ...

  4. 第九周 psp

    团队项目PSP 一:表格     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 9:50 12:45 35 45 80 分析与 ...

  5. 不断优化，重构我的代码-----拖拽jquery插件

    最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...

  6. Myeclipese建立servelet时出现带有javax.servlet.http.HttpServlet;变成了红色的解决方法

    如下图 上面这部分都变成了红色,说明servlet-api.ja还没有导入进来,只需要单击项目名称然后properties--java Build Path--Libraties--MyEclipse ...

  7. wordpress 自定义登录表单

    wordpress 有很多插件支持自定义登录表单,本文讨论无插件形式. 自定义登录表单又分为两种 自定义登录表单 在前端创建一个登录页面

  8. SSH配置中出现问题

    问题1:org.springframework.beans.factory.NoSuchBeanDefinitionException: org.springframework.beans.facto ...

  9. How to change hostname on SLE

    修改/etc/HOSTNAME文件,在此文件中保存主机名,例如: linuxserv1 然后运行命令设置主机名 # /etc/rc.d/boot.localnet start 方法3. 运行 sysc ...

  10. +Load和+initialize方法解析

    http://www.cnblogs.com/ider/archive/2012/09/29/objective_c_load_vs_initialize.html