很多时候我们用到三角形这个效果:

  我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的是一个正方形,颜色和定义边框的颜色相同,我们看到正方形其实是这个div边框。

  1. <div id="d1"></div>
  2.  
  3. style:
  4. #d1{
  5. width:0;
  6. height:0;
  7. border:100px solid red;
  8. }

实现效果:

那么这个元素现在对应的每个边框是什么样子的呢?我们来看:

对应代码:

  1. <div id="d1"></div>
  2.  
  3. style:
  4. #d1{
  5. width:0;
  6. height:0;
  7. border-width:50px;
  8. border-style:solid;
  9. border-color:red blue black yellow;
                 上  右   下   左
  1. }

从上面这个我们发现,其实这个宽高为0的div的每一条边框都是一个三角形,实际操作中我们可能只需要一个三角形,那我们只要把不需要的border隐藏就可以了(用transparent属性):

比如我要一个向下的三角形:

对应代码:

  1. <div id="d1"></div>
  2.  
  3. style:
  4. #d1{
  5. width:0;
  6. height:0;
  7. border-width:50px;
  8. border-style:solid;
  9. border-color:red transparent transparent transparent;
                 上   右      下      左
  10. }

由此可以看出只是把对应border隐藏掉了,对应的border—color顺序为:

border-color:上  右  下  左; 每个颜色之间用空格隔开。

一个45度三角形:

对应代码:

  1. <div id="d1"></div>
  2.  
  3. style:
  4. #d1{
  5. width:0;
  6. height:0;
  7. border-width:50px;
  8. border-style:solid;
  9. border-color:transparent transparent red red ;
         border-color:transparent transparent red blue ;
  1. }

同时我们可以调整对应border的宽度来调整三角形的形状:

  

对应代码:

  我们这里修改了下方border的宽度

  1. <div id="d1"></div>
  2. style:
  3. #d1{
  4. width:0;
  5. height:0;
  6. border-width:50px;
  7. border-bottom-width:150px;
  8. border-style:solid;
  9. border-color:transparent transparent red transparent;
  10. border-color:blue green red black;
  11. }

同时我们也可以绘制一个圆角三角形:

对应代码:

这里为了看起来舒服些,加了透明度属性;

  1. <div id="d1"></div>
  2. style:
  3. #d1{
  4. width:0;
  5. height:0;
  6. border-width:50px;
  7. border-style:solid;
  8. border-top-left-radius: 15px;
  9. opacity: 0.569;
  10. border-color:red transparent transparent red;
  11. }

关于三角形的制作基本就这些,很多时候配合伪类before、after使用会有意想不到的效果:

比如这个我自己编写的登录窗口的标签:

CSS3实现三角形的更多相关文章

  1. css3画三角形的原理

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

  2. pure CSS3 实现三角形icon的方法

    pure CSS3 实现三角形icon的方法 border: color+transparent transform : rotate() /rotateZ() ? 使用 实体字符"◆&qu ...

  3. CSS3实现三角形和对话框

    这是最终实现的效果,类似于微信对话框的样式. 分析一下这个对话框的结构,由一个小三角形和一个长方形构成.长方形很容易就可以实现,重点是如何用CSS3做出一个小三角形. 一.如何生成一个三角形  总结: ...

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

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

  5. CSS3画三角形原理

    1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-r ...

  6. CSS3中三角形及三角形组合图实现

        几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...

  7. 使用CSS3制作三角形小图标

    话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <di ...

  8. css3实现三角形,聊天背景气泡,心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  9. css3绘制三角形

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

随机推荐

  1. Ajax&XMLHttpRequest

    XMLHttpRequest 简单省力的方法 将文件编码成base64通过Ajax上传 HTML5学习之FileReader接口 HTML5学习之FileReader接口 通过Ajax方式上传文件,使 ...

  2. 网页JavaScript2

    window.close()     关闭网页, window.opener.close()    关闭打开当前窗口的源窗口 间隔与延迟 window.setlnterval("执行代码&q ...

  3. (转)passwordStrength 基于jquery的密码强度检测代码使用介绍

    使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label>  ...

  4. SQL从入门到基础 - 07 抑制重复数据

    一.去掉数据重复 distinct 1. Select FDepartment from T_Employee →select distinct FDepartment from T_Employee ...

  5. C# List<T>转为 DataTable

    // remove "this" if not on C# 3.0 / .NET 3.5 public static System.Data.DataTable ConvertTo ...

  6. [c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息

    上一篇已经把所有消息封装且都各自有方法处理了,这篇从使用第一步——关注开始,  关注之后进行消息记录,同时回复文本消息给用户,关注方法:DoSub,另外新用户扫描带参数的二维码关注方法:DoCodeN ...

  7. ORA-01172 ORA-01151

    今天发现服务器的9号硬盘坏了,因做了RAID5,报障后也没理会,过了一会儿,有人反应说报表运行不出来,发现服务器所有的硬盘都不工作了,界面也没有反应,就强行关机,再开机可以进入系统,等维修人员来换了新 ...

  8. mongodb一个关键字对多个字段同时查询,mongodb $or $and查询

    $query = '{ "$and": [                 {"$or": [{"reported": {"$ex ...

  9. jquery-multiselect在ie6里的一个bug

    在使用jquery-multiselect(一个把下拉框改造成带checkbox的可以多选的控件)时,正常时应该是下面这样:而它在ie6里是下面这样: 其中第一个bug参考‘ie6里png图片不透明’ ...

  10. 利用css3-animation来制作逐帧动画

    前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...