css3绘制三角形
将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绘制三角形的更多相关文章
- 怎么利用CSS3绘制三角形
最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb"> ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- 用CSS3绘制图形
参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- 纯CCS绘制三角形箭头图案
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...
- unity 绘制三角形
哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
随机推荐
- Android TV listView焦点平滑移动
先上TV上效果图 Mark下思路: package com.test.ui; import java.lang.reflect.Method; import android.annotation.Su ...
- HFile
HFile存储格式 HBase中的所有数据文件都存储在Hadoop HDFS文件系统上,主要包括两种文件类型: 1. HFile, HBase中KeyValue数据的存储格式,HFile是Hadoop ...
- linux内核中访问共享资源
访问共享资源的代码区域称为临界区,临时以某种互斥机制加以保护.中断屏蔽.原子操作 自旋锁和信号量是Linux设备驱动中可采用的互斥途径. 在单CPU范围内避免竞态的一种简单方法是在进入临界区之前屏蔽系 ...
- SharePoint2007 开发部署Application Pages
介绍:SharePoint应用程序页,也就是_layouts路径下的aspx页面,服务器C:\Program Files\Common Files\Microsoft Shared\web serve ...
- 1-bit and 2-bit Characters
We have two special characters. The first character can be represented by one bit 0. The second char ...
- 《深入理解Java虚拟机》读书笔记3--垃圾回收算法
转载:http://blog.csdn.net/tjiyu/article/details/53983064 下面先来了解Java虚拟机垃圾回收的几种常见算法:标记-清除算法.复制算法.标记-整理算法 ...
- OpenStack初识
一.它可以用来做什么? 想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让初学者更容易接受和理 ...
- IT小团队的管理者的突围之道
笔者前几天被问到一个问题,你在团队管理方面有什么值得分享的吗?咋一听,实用千言万语,但是事后回忆说出来的东西感觉空无一物,缺少干货.故想通过写一篇随笔思考整理一下,刷新一下自己对小团队管理的认知.这里 ...
- (转) windows下 安装 rabbitMQ 及操作常用命令
该博客转载自:https://blog.csdn.net/gy__my/article/details/78295943 原作者:Eric Li 出处:http://www.cnblogs.com/ ...
- VirtualBox上安装64位系统
http://blog.csdn.net/mal327/article/details/6597263 原来VirtualBox安装64位的系统需要满足以下条件: 1.64位的cpu2.安装的系统必须 ...