用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. LG2024 [NOI2001]食物链

    拆点法 用并查集维护每种动物的同类.天敌.食物群 #include<cstdio> int fa[300005]; int n,k,ans; inline int read() { int ...

  2. tp5.1 错误 No input file specified.

    http://www.xxxx.com/admin/index/index 出现错误:No input file specified. 一.方法 与php版本有关  PHP版本5.6以上都会出现这个问 ...

  3. read()/fread()/mmap()执行效率对比

    一. read()/fread()/mmap()执行效率对比 系统调用read.c: #include <sys/types.h> #include <sys/stat.h> ...

  4. markdown 知识点

    符号 说明 作用 ___ 三个下划线 一条直线 * 或_ 1个星号 或 1个下划线 文字斜体 ** 或__ 2个星号 或 2个下划线 文字加粗 全角2个空格 缩进2个汉字 竖线之间加3个间隔符放在第二 ...

  5. maven 指定 jdk 版本

    方法1:直接修改 本地  settings.xml 文件 <profiles>  </profiles> 之间加入 下面的 <profile> <id> ...

  6. python值传递和指针传递

    a= 1def change_integer(a):        a=a+1        return a print change_integer(a)print a b= [1, 2, 3] ...

  7. Nginx 下部署 HTTPS 与安全调优

    什么是 HTTPS?# HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的 ...

  8. POJ2392 Space Elevator

    题目:http://poj.org/problem?id=2392 一定要先按高度限制由小到大排序! 不然就相当于指定了一个累加的顺序,在顺序中是不能做到“只放后面的不放前面的”这一点的! 数组是四十 ...

  9. golang中如何判断文件是否有可执行权限

    本文介绍在Go语言如何检查文件的权限.以检查文件可执行权限为例. 在文件系统中,文件的属性使用uint32表示. 例如 -rwxrwxrwx 判断可执行权限,也就是检查文件mode是否有: --x-- ...

  10. spring mvc 工作原理

    SpringMVC的工作原理图: SpringMVC流程 1.  用户发送请求至前端控制器DispatcherServlet. 2.  DispatcherServlet收到请求调用HandlerMa ...