将div的宽和高设置为0;利用border-width、border-style、border-color属性绘制不同位置边框的样式。将不需要展示的三角颜色填充为transparent透明即可,就能得到某一部分三角。

div{
    width:;
    height:;
border-style: dashed dashed dashed solid ;
/* dashed是兼容ie6写法,ie6不支持背景透明*/
border-width:10px;
border-color:transparent transparent transparent blue;
}

(左下)    (左上)      (右上)    (右下)

div{
width:;
height:;
border-style: solid ;
border-width:10px;
/*左下*/
border-color:transparent transparent blue blue;
/*左上*/
border-color:blue transparent transparent blue;
/*右上*/
border-color:blue blue transparent transparent ;
/*右下*/
border-color:transparent blue blue transparent ;
}

css3绘制三角形的更多相关文章

  1. 怎么利用CSS3绘制三角形

    最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb"> ...

  2. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  4. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  5. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  6. CSS绘制三角形和箭头,不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  7. 纯CCS绘制三角形箭头图案

    用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...

  8. unity 绘制三角形

    哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...

  9. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

随机推荐

  1. 字符编辑技术C语言实现

    #include<string.h> #include<ctype.h> #include<stdio.h> /*插入函数 ccode待插入的字符 anystrin ...

  2. ionic1 打包过程 常用命令行

    ionic start myapp                                             myapp是项目名字 ionic start myapp --v2     ...

  3. 如何将程序集安装到全局程序集缓存GAC

    针对一些类库项目或用户控件项目(一般来说,这类项目最后编译生成的是一个或多个dll文件),在程序开发完成后,有时需要将开发的程序集(dll文件)安装部署到GAC(全局程序集缓存)中,以便其他的程序也可 ...

  4. MySQL/MariaDB中的事务和事务隔离级别

    本文目录:1.事务特性2.事务分类 2.1 扁平事务 2.2 带保存点的扁平事务 2.3 链式事务 2.4 嵌套事务 2.5 分布式事务3.事务控制语句4.显式事务的次数统计5.一致性非锁定读(快照查 ...

  5. Google揭开Mesa的神秘面纱——一个具备跨地域复制和近实时特性的可伸缩数据仓库

    http://www.infoq.com/cn/news/2014/08/google-data-warehouse-mesa Google发表了一篇新的论文,该论文描述了他们内部所使用的一个被称为M ...

  6. ThinkPHP5从零基础搭建CMS系统(一)

    了解学习thinkphp5应该是2016年年底的事情,当时还没有接触过thinkphp3版本,觉得通过手册直接上手学习tp5蛮轻松的,现在从零记录下,搭建可扩展的CMS. 1.ThinkPHP环境搭建 ...

  7. WiderG的博客皮肤

    我的Skin 还是亮出自己的Blog定制代码吧: 其实也不是完全自己写的(有抄袭),也不大懂这方面的知识,代码冗长,逻辑不清,加载缓慢,见谅喽

  8. Spark---架构原理

    Spark核心组件 1.Driver 我们编写的Spark程序就在Driver上 Spark集群节点之一,就是你提交的Spark程序的机器 2.Master Master是个进程 Master其实主要 ...

  9. Hbase出现ERROR: Can't get master address from ZooKeeper; znode data == null正确找到解决思路

    第一次配置时出现这样的错误,也很懵的,到处上网找博客看资料,都试了个遍,但是问题还是存在,以下这些博客写的或许是解决一类问题的方式. https://blog.csdn.net/whbo111/art ...

  10. longestCommonPrefix

    Description: Write a function to find the longest common prefix string amongst an array of strings. ...