CSS3实现三角形
很多时候我们用到三角形这个效果:
我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的是一个正方形,颜色和定义边框的颜色相同,我们看到正方形其实是这个div边框。
- <div id="d1"></div>
- style:
- #d1{
- width:0;
- height:0;
- border:100px solid red;
- }
实现效果:
那么这个元素现在对应的每个边框是什么样子的呢?我们来看:
对应代码:
- <div id="d1"></div>
- style:
- #d1{
- width:0;
- height:0;
- border-width:50px;
- border-style:solid;
- border-color:red blue black yellow;
上 右 下 左
- }
从上面这个我们发现,其实这个宽高为0的div的每一条边框都是一个三角形,实际操作中我们可能只需要一个三角形,那我们只要把不需要的border隐藏就可以了(用transparent属性):
比如我要一个向下的三角形:
对应代码:
- <div id="d1"></div>
- style:
- #d1{
- width:0;
- height:0;
- border-width:50px;
- border-style:solid;
- border-color:red transparent transparent transparent;
上 右 下 左- }
由此可以看出只是把对应border隐藏掉了,对应的border—color顺序为:
border-color:上 右 下 左; 每个颜色之间用空格隔开。
一个45度三角形:
对应代码:
- <div id="d1"></div>
- style:
- #d1{
- width:0;
- height:0;
- border-width:50px;
- border-style:solid;
- border-color:transparent transparent red red ;
border-color:transparent transparent red blue ;
- }
同时我们可以调整对应border的宽度来调整三角形的形状:
对应代码:
我们这里修改了下方border的宽度
- <div id="d1"></div>
- style:
- #d1{
- width:0;
- height:0;
- border-width:50px;
- border-bottom-width:150px;
- border-style:solid;
- border-color:transparent transparent red transparent;
- border-color:blue green red black;
- }
同时我们也可以绘制一个圆角三角形:
对应代码:
这里为了看起来舒服些,加了透明度属性;
- <div id="d1"></div>
- style:
- #d1{
- width:0;
- height:0;
- border-width:50px;
- border-style:solid;
- border-top-left-radius: 15px;
- opacity: 0.569;
- border-color:red transparent transparent red;
- }
关于三角形的制作基本就这些,很多时候配合伪类before、after使用会有意想不到的效果:
比如这个我自己编写的登录窗口的标签:

CSS3实现三角形的更多相关文章
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- pure CSS3 实现三角形icon的方法
pure CSS3 实现三角形icon的方法 border: color+transparent transform : rotate() /rotateZ() ? 使用 实体字符"◆&qu ...
- CSS3实现三角形和对话框
这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形 总结: ...
- 怎么利用CSS3绘制三角形
最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了 <p class="bbb"> ...
- CSS3画三角形原理
1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...
- CSS3中三角形及三角形组合图实现
几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...
- 使用CSS3制作三角形小图标
话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <di ...
- css3实现三角形,聊天背景气泡,心形等形状
1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...
- css3绘制三角形
将div的宽和高设置为0:利用border-width.border-style.border-color属性绘制不同位置边框的样式.将不需要展示的三角颜色填充为transparent透明即可,就能得 ...
随机推荐
- Ajax&XMLHttpRequest
XMLHttpRequest 简单省力的方法 将文件编码成base64通过Ajax上传 HTML5学习之FileReader接口 HTML5学习之FileReader接口 通过Ajax方式上传文件,使 ...
- 网页JavaScript2
window.close() 关闭网页, window.opener.close() 关闭打开当前窗口的源窗口 间隔与延迟 window.setlnterval("执行代码&q ...
- (转)passwordStrength 基于jquery的密码强度检测代码使用介绍
使用很简单. 代码如下: $('#pass').passwordStrength(); XHTML 代码如下: <p><label>请输入密码:</label> ...
- SQL从入门到基础 - 07 抑制重复数据
一.去掉数据重复 distinct 1. Select FDepartment from T_Employee →select distinct FDepartment from T_Employee ...
- C# List<T>转为 DataTable
// remove "this" if not on C# 3.0 / .NET 3.5 public static System.Data.DataTable ConvertTo ...
- [c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息
上一篇已经把所有消息封装且都各自有方法处理了,这篇从使用第一步——关注开始, 关注之后进行消息记录,同时回复文本消息给用户,关注方法:DoSub,另外新用户扫描带参数的二维码关注方法:DoCodeN ...
- ORA-01172 ORA-01151
今天发现服务器的9号硬盘坏了,因做了RAID5,报障后也没理会,过了一会儿,有人反应说报表运行不出来,发现服务器所有的硬盘都不工作了,界面也没有反应,就强行关机,再开机可以进入系统,等维修人员来换了新 ...
- mongodb一个关键字对多个字段同时查询,mongodb $or $and查询
$query = '{ "$and": [ {"$or": [{"reported": {"$ex ...
- jquery-multiselect在ie6里的一个bug
在使用jquery-multiselect(一个把下拉框改造成带checkbox的可以多选的控件)时,正常时应该是下面这样:而它在ie6里是下面这样: 其中第一个bug参考‘ie6里png图片不透明’ ...
- 利用css3-animation来制作逐帧动画
前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...