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: ...
随机推荐
- LeetCode(63)-First Bad Version
题目: You are a product manager and currently leading a team to develop a new product. Unfortunately, ...
- SVN服务器搭建和配置使用详解
SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...
- spring 配置多数据源(mysql读写分离)
前段时间刚换了家新公司,然后看项目代码里用了数据库读写分离的架构,然后好奇扒了代码简单看了下,总体来说就是运用spring aop切面方式来实现的.看明白后就在自己的个人小项目里运用了下,测试OK,所 ...
- JBOSS的启动和停止
本实例使用的JBOSS版本是jboss-4.2.3.GA 假设条件 1. 已设置好JAVA_HOME环境变量 2. 已下载JBoss并且安装目录为:D:\Java\jboss-4.2.3.GA 启 ...
- Odoo 学习 【二】Environment 概览
Environment 参考链接: http://odoo-new-api-guide-line.readthedocs.io/en/latest/environment.html#environme ...
- Day8 封装 静态属性property
封装:将类的属性隐藏 #先看如何隐藏 1,在定义的属性之前加入__. class Foo: __N=111111 #_Foo__N def __init__(self,name): self.__Na ...
- IOS Swift语言开发 tableView的重用以及自cell的自适应高度
http://www.aichengxu.com/iOS/11143168.htm 一.准备数据 (这是一个元组,第一个元素为英雄的名字;第二个元素为英雄头像图片的名字,格式为.PNG,如果为其他的格 ...
- 搭建centos7的开发环境1-系统安装及Python配置
在公司开发部干活的好处是可以再分配一台高性能的PC,有了新的工作电脑,原来分配的笔记本电脑就可以安装linux系统做开发了,主要有两方面的开发计划,一个是计划中要参与爬虫系统的开发,第二个是大数据环境 ...
- angular2项目如何使用sass
angular/cli支持使用sass 新建工程: 如果是新建一个angular工程采用sass: ng new My_New_Project --style=sass 这样所有样式的地方都将采用sa ...
- Spring4托管Hibernate5并利用HibernateTemplate进行数据库操作
时隔半年,再次发布配置类的相关Blog,因为左手受伤原因先做一个简述. 首先利用idea创建一个Spring+SpringMVC+Hibernate项目,注意的是因为我们要完全放弃Hibernate以 ...