用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. 极快瑞的函数式编程，Jquery涉及的一些函数

    $(function(){ 一些实现功能的代码:})————————————文档载入完成后执行的函数.$(function(){}) 是 $(document).ready(function(){}) ...

  2. ubuntu 安装php 报错解决

    安装php时候遇到的问题: dpkg: 处理软件包 php7.1-opcache (--configure)时出错: 依赖关系问题 - 仍未被配置dpkg: 依赖关系问题使得 php7.1-readl ...

  3. sqlserver linux 容器运行

    sqlserver linux 版本的容器大小目前已经相对比较小了,对于开发来说已经比较方便了 docker-compose 文件 version: "3" services: d ...

  4. bat中的“多线程”处理代码

    大家都知道,批处理中运行的都是一步步单进程执行, 但如果进程执行比较慢,如PING一个不通的IP地址,那就会大大影响批处理程序的执行效率. 如下内容将简单举例,在WINDOWS下使用批处理做多进程并发 ...

  5. C语言面试题4

    第二部分:程序代码评价或者找错 1.下面的代码输出是什么,为什么?void foo(void){    unsigned int a = 6;    int b = -20;    (a+b > ...

  6. pykd试用

    啥是pykd? 一个windbg插件,能在windbg里面运行python指令 试用步骤 下载from https://pykd.codeplex.com/releases/view/615625 解 ...

  7. chrome 小技巧：保持元素的hover状态

    审查元素,选中需要hover的标签 点击"Styles"菜单中的":hov",弹出 Force element state 选中相应的 :hover :acti ...

  8. Apache mod_rewrite实现HTTP和HTTPS重定向跳转

    当你的站点使用了HTTPS之后,你可能会想把所有的HTTP请求(即端口80的请求),全部都重定向至HTTPS(即端口443).这时候你可以用以下的方式来做到:(Apache mod_rewrite) ...

  9. C/C++基础----表达式

    1 基本概念 类型转换,小整型通常会被提升. 运算符重载,运算对象的个数.运算符的优先级和结合律都是无法改变的. 左值右值,对象被用做右值时,使用的是对象的值(内容):用做左值时,使用的是对象的身份( ...

  10. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...