用border做三角符号以及其他图形

.test{width:; height:; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}

.test1{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}/*梯形图案*/

.test2{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}/*从梯形到三角*/

.test3{width:; height:; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}/*从等腰直角三角形到普通等腰三角*/

.test4{width:; height:; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}

.test5{width:; height:; border-width:8px 8px; border-style:solid; border-color:#fff #fff #fff #ff3300;}

设置高宽为0，设置边框的高度宽度，通过设置边框的上右下左4个方向的颜色，来展示不同的样式

 
 
 
 
 
 

border做三角符号的更多相关文章

  1. 使用css实现三角符号

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

  2. 利用边框border的属性做小符号

    前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右:  其css代码如下: .fuhao { pos ...

  3. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  4. HTML 三角符号

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

  5. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  6. css 绘制对话框三角符号

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  8. CSS border 生成三角

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

  9. 纯CSS的三角符号

    项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...

随机推荐

  1. day20 python sys os time json pickl 正则

    字符组 : [字符组] 在同一个位置可能出现的各种字符组成了一个字符组,在正则表达式中用[]表示 字符分为很多类,比如数字.字母.标点等等. 假如你现在要求一个位置....9这10个数之一. 量词 几 ...

  2. 一个方便查看数据库转换rest/graphql api 的开源软件的github 项目

    https://github.com/dbohdan/automatic-api 是一个不错的github 知识项目,帮助我们 列出了,常见的的数据库可以直接转换为rest/graphql api 的 ...

  3. php重新整理数组索引

    语法 array_merge(array1,array2,array3...) 参数 描述 array1 必需.输入的第一个数组. array2 必需.输入的第二个数组. array3 可选.可指定的 ...

  4. 【转】每天一个linux命令（52）：ifconfig命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网 ...

  5. docker 使用教程（2）常用命令

    1. 查看docker信息(version.info) # 查看docker版本$docker version # 显示docker系统的信息$docker info 2. 对image的操作(sea ...

  6. VS2010/MFC编程入门系列教程 (转)

    http://www.jizhuomi.com/school/  鸡啄米编程课堂 http://www.jizhuomi.com/software/257.html http://blog.csdn. ...

  7. 最新hadoop虚拟机安装教程（附带图文）

    前两天看到有人留言问在什么情况下需要部署hadoop,我给的回答也很简单,就是在需要处理海量数据的时候才需要考虑部署hadoop.关于这个问题在很早之前的一篇分享文档也有说到这个问题,数据量少的完全发 ...

  8. GitHub10岁之际HanLP自然语言处理包用户量跃居榜首

    在本周,GitHub终于度过了属于它自己的十周岁生日.这个在2008年由3个来自旧金山的年轻人创建的基于Git的代码托管网站,先后超越了元老级的SourceForge和背景强大的Google Code ...

  9. webSocket支持的浏览器

  10. linux svn安装(转载)

    第一章 安装 1. 采用源文件编译安装.源文件共两个,为:subversion-1.6.1.tar.gz (subversion 源文件)subversion-deps-1.6.1.tar.gz (s ...