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. C# 正则表达式匹配汉字

    ; Regex P_regex = new Regex("^[\u4E00-\u9FA5]{0,}$"); ;i < txt_str.Text.Length; i++) { ...

  2. 《bootstrap》实战---作为了解

    感觉这句话说的挺有道理,"一些最佳实践不管是语义标记还是移动优先的设计,抑或资源性能优化,都需要额外的时间和精力才能时间".用心做,才会做好.

  3. asp.net identity 3.0.0 在MVC下的基本使用（一）

    注册时信箱转为用户名. 本人习惯使用用户名做注册用户,因为不管是什么终端起码都能少输入几个字符,可以提高用户体验. 这里需要更改控制器,模型和视图 1.打开Controllers目录下的Account ...

  4. HTTP Header

    1.User-Agent 记录访问当前网页的用户浏览器类型和版本,操作系统类型和版本.常见场景:根据不同浏览器和版本提供不同站点. JavaScript通过window.navigator.userA ...

  5. 阿里云服务器Linux CentOS安装配置（五）jetty配置、部署

    阿里云服务器Linux CentOS安装配置(五)jetty配置.部署 1.官网下载jetty:wget http://repo1.maven.org/maven2/org/eclipse/jetty ...

  6. opengl中对glOrtho()函数的理解

    glOrtho是创建一个正交平行的视景体. 一般用于物体不会因为离屏幕的远近而产生大小的变换的情况.比如,常用的工程中的制图等.需要比较精确的显示. 而作为它的对立情况, glFrustum则产生一个 ...

  7. 数据库访问CRUD;__SELF__和__ACTION__的区别；自动收集表单:$n->create();

    一.tp框架数据访问(pdo基础) public function test() { $n = D("Nation"); //select();find(); //查询 1.$at ...

  8. Linux基本操作命令

    Linux基本操作命令 首先介绍一个名词“控制台(console)”,它就是我们通常见到的使用字符操作界面的人机接口,例如dos.我们说控制台命令,就是指通过字符界面输入的可以操作系统的命令,例如do ...

  9. oracle+servlet+extjs4 分页表格布局示例代码

    Log.java package com.example.entity; import java.util.Date; public class Log { private int id; priva ...

  10. golang 环境一键式配置

    在window下,通过以下bat,自动设置环境变量,启动终端,并cd到gopath目录 set goroot=c:\go set gopath=d:\go @start "start gol ...