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. CodeForces 514B

    B. Han Solo and Lazer Gun time limit per test 1 second memory limit per test 256 megabytes input sta ...

  2. 【原】iOS学习之苹果开发者账号的相关操作

    1.苹果开发者账号分类 按价格分类 免费 ① 个人申请账号 仅可以用于真机调试 ② 院校账号 仅可以用于真机调试 通过苹果认证的高校可以使用 99$ ① 个人账号 ② 企业(公司)账号 申请所需的条件 ...

  3. Android入门（二）：Android的系统架构

    android的系统架构和其操作系统一样,采用了分层的架构.从架构图看,android分为四个层,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层.   从技术方面看,An ...

  4. 深入分析Java ClassLoader原理

    一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管是CS还是BS应用,都是由若干个.class文件组织而成的一个完整的Java应用程序,当程序在运行时,即会调用该程 ...

  5. ajax pagination 布局刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. ArcMap 10.3 AddIN找不到插件

    现象:VS 2012写的AddIn插件,编译通过,安装成功 ArcGIS 10.3的AddIN Manager中,可以看到该插件 可是在自定义中却找不到.检索不到该插件. 解决方法:.net Fram ...

  7. JS中的函数声明错误

      这个问题是JS的函数声明形参部分不带var. ( 额,基础不扎实.)

  8. jQuery中的事件和动画效果

    刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...

  9. Mysql5.7修改默认密码

    由于 Mysql5.7的默认密码是随机生成的,所以需要修改成我们自己常用的密码 1.修改 my.ini,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 my ...

  10. gdb

    ● 要用gdb调试,在ggc编译时,需要家参数-g: gcc -g test.c - test ● 设置断点: gdb test b 63 if i==10 63是断点坐在的行号,用list命令列举出 ...