用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. 思维题(两点逼近)LeetCode11 Container with Most Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  2. day40 python MySQL【四】 之 【索引】【视图】【触发器】【存储过程】【函数】

    MySQL[四] 之 [索引][视图][触发器][存储过程][函数]   1.索引 索引相当于图书的目录,可以帮助用户快速的找到需要的内容. 数据库利用各种各样的快速定位技术,能够大大提高查询效率.特 ...

  3. kettle--变量的使用

    一.kettle的inner join 需求: 目前本地文件系统上有一个person.csv文件: 数据库中有一个person表: 现在需要将这两张表做inner join的操作. 1.1首先我们写一 ...

  4. zz 史上最全--各银行借记卡的年费、小额管理费、转账费等!

    史上最全--各银行借记卡的年费.小额管理费.转账费等! 发布时间:2015-01-14 17:28:10 还在迷茫借记卡自费的菜主儿们~菜菜特别整理关于各银行借记卡.存折账户等的年费.小额管理费.转账 ...

  5. java中字符与字节的编码关系

    在 GB 2312 编码或 GBK 编码中,一个英文字母字符存储需要1个字节,一个汉字字符存储需要2个字节. 在UTF-8编码中,一个英文字母字符存储需要1个字节,一个汉字字符储存需要3到4个字节. ...

  6. Centos 6.5 yum 安装Apache软件

    首先在系统上面查询一下是否已经安装了apache 软件[Apache软件在linux系统里的名字是httpd] rpm    -qa    httpd 如果有返回的信息,则会显示已经安装的软件.如果没 ...

  7. ZedGraph 柱状图、饼图、折线图演示源码

    http://code1.okbase.net/codefile/ZedGraphControl.ContextMenu.cs_201211225626_97.htm // //This librar ...

  8. JZ2440 裸机驱动 第11章 通用异步收发器UART

    本章目标: 了解UART原理: 掌握S3C2410/S3C2440中UART的使用 11.1 UART原理及UART内部使用方法 11.1.1 UART原理说明     UART用于传输串行数据:   ...

  9. 为什么要使用MONO

    今天中午我收到一个Email,是关于以前写的一个MONO文章的疑问,我对此做了一些解释,希望与有相同问题的朋友一起分享一下,邮件内容如下: 我在网上找到了您写的一篇关于Mono的“在windows下使 ...

  10. neo4j图数据库入门

    一.安装及启动 1.安装 Java SDK 1)     地址:http://www.oracle.com/technetwork/java/javase/downloads 2)     下载:jd ...