话不多说看效果：演示效果，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. [C语言 - 4] 指针

    存放变量地址的变量 int a = 1; int *p; p = &a;   在64位系统中,占用8个字节 直接引用 间接引用 *p : 指针指向的变量的值 不要使用未初始化的指针     1 ...

  2. Codeforces Beta Round #7 C. Line (扩展欧几里德)

    题目链接:http://codeforces.com/problemset/problem/7/C 给你一个直线方程,有整数解输出答案,否则输出-1. 扩欧模版题.这里有讲解:http://www.c ...

  3. 用python查看URL编码的中文

    什么是URL编码呢,请看https://zh.wikipedia.org/wiki/Urlencode. 有时,我们向一些网站提交中文参数时,中文是会被编码成这种格式的 "%B1%E0%C2 ...

  4. MPAndroiddChart的使用

    效果图 代码: package com.jiahao.me; import java.util.ArrayList; import java.util.List; import android.app ...

  5. Linux下的图形界面——X Window的安装

    X Window即X Windows图形用户接口,是一种计算机软件系统和网络协议,提供了一个基础的图形用户界面(GUI)和丰富的输入设备能力联网计算机.其中软件编写使用广义的命令集,它创建了一个硬件抽 ...

  6. sre_constants.error: unbalanced parenthesis

    Traceback (most recent call last):   File "androidmarket82.py", line 108, in <module> ...

  7. Android 监听短信(同时监听广播和数据库)

    暗扣,强烈谴责这种侵害用户利益的行为... 下面给大家介绍Android暗扣原理.......  Android4.4以下的系统玩游戏就要小心了哈 暗扣方式之一:短信订购,即监听--------拦截- ...

  8. HDU 4821 String hash

    String Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  9. Codeforces Gym 100002 C "Cricket Field" 暴力

    "Cricket Field" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1000 ...

  10. delphi 动态建立WebBrower

    //Delphi动态建立WebBrowerunit Main;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphi ...