用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. ballerina 学习 三十 扩展开发(一)

    ballerina 主要是分为两大类 基于ballerina 语言开发的,一般是客户端的connector 使用java语言开发的(类似的基于jvm的都可以),一般是注解以及进行构件生成 baller ...

  2. 在CentOS和RHEL中配置SNMPv3

    首先,使用yum安装必要的软件 [root@server ~]# yum install net-snmp-utils net-snmp-devel安装完成之后, 先停止snmpd,再创建具有只读属性 ...

  3. uml建模工具介绍

    应用最广的由两种种1. Rational Rose,它是ibm的 .2.Microsoft的 Microsoft Office Visio® 2003 3.Enterprise Architect.还 ...

  4. FP-growth算法发现频繁项集(一)——构建FP树

    常见的挖掘频繁项集算法有两类,一类是Apriori算法,另一类是FP-growth.Apriori通过不断的构造候选集.筛选候选集挖掘出频繁项集,需要多次扫描原始数据,当原始数据较大时,磁盘I/O次数 ...

  5. Nginx隐藏主机信息,proxy_hide_header 与fastcgi_hide_header

    Nginx中proxy_hide_header 与fastcgi_hide_header都可以隐藏主机头信息,两者在具体使用时还是有着一定的区别的.刚好业务使用的nginx反向代理在显示响应头时将后端 ...

  6. POJ3666序列最小差值

    题目:http://poj.org/problem?id=3666 dp方程可以是 d [ i ] [ j ] = min ( d [ i - 1 ] [ k ] ) + abs ( a [ i ] ...

  7. 在 Windows 上使用 Cygwin

    引用:http://www.ibm.com/developerworks/cn/aix/library/au-spunix_cygwin/#resources Cygwin 是一个用于 Microso ...

  8. 解决EF一对一或多对一的删除

    people 类中有 zhengshu类 且是一对一,现在要删除people类中的zhengshu 网上看了N多办法,什么更新外键什么滴. 其实方法简单极了 using (KJExamEntity c ...

  9. appium+python自动化42-微信公众号

    前言 本篇介绍如何在微信公众号上自动化测试,以操作我的个人公众号:yoyoketang为例,没关注的,先微信关注了,再跟着操作 环境准备: python 3.6 appium 1.7以上版本 微信6. ...

  10. adb命令查看app的日志

    前言 在做app测试的时候,经常会遇到异常,此时如果开发没有异常保存,那么测试就得通过adb命令来查看日志信息.基于Windows平台的操作: logcat输出日志 一.把日志输出到手机指定目录 其命 ...