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: ...
随机推荐
- unity 代码C#封装为dll
1 Visual studio软件打开后创建一个项目 2并选择类库类型 3编写简单的代码看看效果(发现会报错),主要是没有添加类库,以及using UnityEngine;引用空间 4添加类库,引用 ...
- Tomcat的缺省是多少,怎么修改
Tomcat的缺省端口号是8080. 修改Tomcat端口号: 1.找到Tomcat目录下的conf文件夹 2.进入conf文件夹里面找到server.xml文件 3.打开server.xml文件 ...
- Java学习不走弯路教程(7.Eclipse环境搭建)
7.Eclipse环境搭建 在前几章,我们熟悉了DOS环境下编译和运行Java程序,对于大规模的程序编写,开发工具是必不可少的.Java的开发工具比较常用的是Eclipse.在接下来的教程中,我们将基 ...
- Odoo 学习 【二】Environment 概览
Environment 参考链接: http://odoo-new-api-guide-line.readthedocs.io/en/latest/environment.html#environme ...
- postgresql to_char 问题
select create_time from xxx; select to_char(create_time,'yyyy-MM-dd HH24:mm:ss') as create_time fr ...
- Pivotal开源基于PostgreSQL的数据库Greenplum
http://www.infoq.com/cn/news/2015/11/PostgreSQL-Pivotal 近日,Pivotal宣布开源大规模并行处理(MPP)数据库Greenplum,其架构是针 ...
- 浅析fork()和底层实现
记得以前初次接触fork()函数的时候,一直被“printf”输出多少次的问题弄得比较晕乎.不过,“黄天不负留心人".哈~ 终于在学习进程和进程创建fork相关知识后,总算是大致摸清了其中的 ...
- PHP $_FILES函数详解
原创 转载请注明出处! 先来看一段代码 <form enctype="multipart/form-data" action="upload.php" m ...
- Python撸支付宝红包教程,行走在灰色产业边缘的程序员!
2018年刚到就作死撸羊毛(支付宝).2017年用分享给支付宝好友链接的官方通道"撸"了400大洋. 如许天天早上7:30便起床开愉快心的分享红包链接.200多个老友分享完一次 ...
- 架构之微服务设计(Nginx + Upsync)
Upsync,微博开源基于Nginx容器动态流量管理方案 . Nginx 以其超高的性能与稳定性,在业界获得了广泛的使用,微博的七层就大量使用了 Nginx .结合 Nginx 的健康检查模块,以及动 ...