话不多说看效果：演示效果，runjs

1.加了宽高和border，边用不同颜色显示，每条边都是一个梯形

2.去掉宽高，每条边都是三角形

3.只显示其中一条边就是不同的三角形了,是不是很简单，改变border四条边宽度试试吧~

上述代码如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>css3—三角形</title>

    </head>

    <style>

        .dib{display: inline-block;}

        .triangle0{

            width:40px;

            height:40px;

            border-top:40px solid yellow;

            border-right:40px solid black;

            border-bottom:40px solid pink;

            border-left:40px solid red;

        }

        .triangle1{

            width:0px;

            height:0px;

            border-top:40px solid yellow;

            border-right:40px solid black;

            border-bottom:40px solid pink;

            border-left:40px solid red;

        }

        .trianglet{

            width:0;

            height:0;

            border-top:40px solid yellow;

            border-right:40px solid transparent;

            border-left:40px solid transparent;

            border-bottom:40px solid transparent;

        }

        .triangler{

            width:0;

            height:0;

            border-top:40px solid transparent;

            border-right:40px solid black;

            border-bottom:40px solid transparent;

            border-left:40px solid transparent;

        }

        .triangleb{

            width:0;

            height:0;

            border-top:40px solid transparent;

            border-right:40px solid transparent;

            border-bottom:40px solid pink;

            border-left:40px solid transparent;

        }

        .trianglel{

            width:0;

            height:0;

            border-top:40px solid transparent;

            border-right:40px solid transparent;

            border-bottom:40px solid transparent;

            border-left:40px solid red;

        }

    </style>

    <body>

        <div class="triangle0 dib"></div>

        <div class="triangle1 dib"></div>

        <div class="trianglet dib"></div>

        <div class="triangler dib"></div>

        <div class="triangleb dib"></div>

        <div class="trianglel dib"></div>

    </body>

</html>

博客园：CSS3—三角形

CSS3—三角形的更多相关文章

  1. CSS3 三角形运用

      酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...

  2. 酷酷的CSS3三角形运用

    概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...

  3. 【转载】酷酷的CSS3三角形运用

    转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...

  4. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  5. css3三角形冒泡泡图形制作

    图一: 图二: <!DOCTYPE html> <html> <head> <title>css 三角形</title> <style ...

  6. css3 三角形

    https://jsbin.com/gexezo/edit?html,css,output https://jsbin.com/gexezo

  7. CSS3 画基本图形，圆形、椭圆形、三角形等

    CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...

  8. CSS3 实现圆形、椭圆形、三角形等各种形状样式

    CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...

  9. CSS3—六边形

    整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...

随机推荐

  1. PID参数整定快速入门（调节器参数整定方法）

    PID调节器参数整定方法很多,常见的工程整定方法有临界比例度法.衰减曲线法和经验法.云润仪表以图文形式分别介绍调节器参数整定方法. 临界比例度法一个调节系统,在阶跃干扰作用下,出现既不发散也不衰减的等 ...

  2. 转载Repository 和Unit of work的使用说明

    利用Repository and Unit of Work重构项目 文章索引和简介 项目最基础的东西已经结束了,但是现在我们的项目还不健全  不利于测试 重复性代码多   层与层之间耦合性高  不利于 ...

  3. ObjC-观察者模式

    观察者模式是设计模式的一种,又称为发布者/订阅者模式,其定义了一种一对多的关系,多个观察者可以监听一个对象.当该对象的状态发生改变时,会通知所有的观察者,观察者会自己进行更新. 观察者模式能够将观察者 ...

  4. 【Python3】SMTP发送邮件

    犹豫和反复浪费了大量时间. 与朋友言 在完成一个邮件发送程序之前我根本不明白什么是邮件,哪怕已经读过廖雪峰大神的文章,没有贬低大神的意思,大神的博客已经非常的详细, 是我的眼大肚皮小毛病在作祟,由一个 ...

  5. 使用 EPPlus，NPOI,操作EXCEL

    NPOI,       读取xls文件(Excel2003及之前的版本)   (NPOI.dll+Ionic.Zip.dll)     http://npoi.codeplex.com/ EPPlus ...

  6. servler--请求重定向

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  7. C#多线程开发

    1.进程与线程的区别 通俗的讲,进行就是任务管理器中进行列表中看到的正在运行的程序,它是一个动态的概念,活动的实体. 线程是程序执行流的最小单元,是线程中一个实体,是系统独立调度和分派CPU基本单位. ...

  8. IIS下的身份验证方式管理

    设置.查看身份验证方式 #导航到某站点下: cd IIS:\Sites\DemoSite\DemoApp #启用站点test01下的Windows身份验证 Set-WebConfigurationPr ...

  9. Ectouch修改虚拟销售数量的方法

    1.参考:http://zhidao.baidu.com/link?url=5OEkRlKqtRcmnO6iyW2pq-gw1aj-1S6QdImmBkQZHHt6tcvT50aIf_1nibP3T6 ...

  10. 2015南阳CCPC D - Pick The Sticks dp

    D - Pick The Sticks Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 无 Description The story happened lon ...