用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. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.1 规则文件

    转载至:https://blog.csdn.net/wo541075754/article/details/75150267 一个标准的规则文件的格式为已“.drl”结尾的文本文件,因此可以通过记事本 ...

  2. matplotlib的颜色及线条控制

    refer to: https://www.cnblogs.com/darkknightzh/p/6117528.html

  3. 杨恒说李的算法好-我问你听谁说的-龙哥说的（java中常见的List就2个）（list放入的是原子元素）

    1.List中常用的 方法集合: 函数原型 ******************************************* ********************************** ...

  4. php递归函数return会出现无法正确返回想要值的情况

    php递归函数中使用return的时候会碰到无法正确返回想要的值得情况,如果不明白其中的原因,很难找出错误的,就下面的具体例子来说明一下吧: 1 2 3 4 5 6 7 8 9 function te ...

  5. mysql复制表结构create table as和like的区别

    对于MySQL的复制相同表结构方法,有create table as 和create table like 两种,区别是什么呢? create table t2 as select * from t1 ...

  6. php curl伪造来源ip和refer实例代码

    php curl伪造来源ip和来路refer实例代码1: //随机IP function Rand_IP(){ $ip2id= round(rand(600000, 2550000) / 10000) ...

  7. 【python】序列切片和range函数

    序列的每个元素都可以用2种索引的表达方式,一种是正数索引,另一种是负数索引. 序列切片,作用是访问序列中一定范围的元素,格式“序列名[A:B]”,其中A为所切片的第一个元素的索引号,而B为切片后剩下的 ...

  8. Django Ajax登录 防止CSRF

    什么是CSRF 维基百科: 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CS ...

  9. FileStream 和StreamWriter 一起用时

    StreamWriter  Flush 即可. FileStream Flush 无用.

  10. php语言介绍分析

    1,胡说八道 php设计专门用于web开发的编程语言,易学易用得到广泛应用的同时也饱受诟病,简单易学使得初学者用最短的时间很容易实现自己的WEB站点,且开源项目丰富,是中小型公司热衷的选择.但是,随着 ...