话不多说看效果：演示效果，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. LCD1602汉字、自定义字符取模

    用zimo221软件, 新建一个8*8的图像,留出左边3列,用右边5列点出自定义字符,选择取模方式C51,就可得到对应的编码 如下图:温度符号℃的编码

  2. [iOS基础控件 - 6.11.3] 私人通讯录Demo 控制器的数据传递、存储

    A.需求 1.搭建一个"私人通讯录"Demo 2.模拟登陆界面 账号 密码 记住密码开关 自动登陆开关 登陆按钮 3.退出注销 4.增删改查 5.恢复数据(取消修改)   这个代码 ...

  3. MVC神韵---你想在哪解脱！（十一）

    为了实现这一处理,我们需要在MoviesController类中追加第二个Create方法.这个Create方法具有一个[HttpPost]属性,它意味着我们将要用它来处理提交到“/Movies/Cr ...

  4. 在VB中利用Nuget包使用SQLite数据库和Linq to SQLite

    上午解决了在C#中利用Nuget包使用SQLite数据库和Linq to SQLite,但是最后生成的是C#的cs类文件,对于我这熟悉VB而对C#白痴的来说怎么能行呢? 于是下午接着研究,既然生成的是 ...

  5. python函数介绍

    1.向函数传递信息 def greet_user(username): print('Hello,' + username.title() + '!') greet_user('jesse') 2.位 ...

  6. Failed to load session “ubuntu” -- 12.04

    在使用ubuntu 12.04的时候,之前不喜欢Unity桌面,就按照网上提示的安装了Gnome桌面,并且成功了! 可是,最近又想把Unity装回来,心想,这不就是安装一软件的活嘛,很简单!于是就卸载 ...

  7. Sonatype Nexus 搭建Maven 私服

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  8. cocos2d-x 纹理源码分析

    转自:http://blog.csdn.net/honghaier/article/details/8068895 当一张图片被加载到内存后,它是以纹理的形式存在的.纹理是什么东西呢?纹理就是一块内存 ...

  9. SRV记录说明

      SRV记录是DNS服务器的数据库中支持的一种资源记录的类型,它记录了哪台计算机提供了哪个服务这么一个简单的信息 SRV 记录:一般是为Microsoft的活动目录设置时的应用.DNS可以独立于活动 ...

  10. 关于MVC中DropDownListFor的一个bug

    如以下代码: //后台 代码 ViewData["source_type"] = new List<SelectListItem> { "}, "} ...