CSS3—三角形
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—三角形的更多相关文章
- CSS3 三角形运用
酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...
- 酷酷的CSS3三角形运用
概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...
- 【转载】酷酷的CSS3三角形运用
转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- css3三角形冒泡泡图形制作
图一: 图二: <!DOCTYPE html> <html> <head> <title>css 三角形</title> <style ...
- css3 三角形
https://jsbin.com/gexezo/edit?html,css,output https://jsbin.com/gexezo
- CSS3 画基本图形，圆形、椭圆形、三角形等
CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- CSS3—六边形
整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...
随机推荐
- 咏南中间件支持DELPHI低版本开发的两层程序平稳升级到三层
提供DELPHI中间件及中间件集群,有意请联系. N年前,我们用DELPHI低版本开发的两层程序(比如工厂ERP系统),现在仍然在企业广泛地得到使用,但老系统有些跟不上企业的发展需要了.主要表现在:虽 ...
- 如何设置(修改)jetty(maven插件maven-jetty-plugi)的端口
在使用jetty的maven插件,有两种方式来改变jetty server的端口,第一种方式较为简单,即: 通过命令行指定端口:mvn -Djetty.port=9999 jetty:run 另一种方 ...
- 常见MFC UI界面库
Xtrme toolkit,BCGControlBar,SkinMagic,AppFace,Skin++,Uskin++,SYGUI,LibUIDK,GuiToolkit,GardenUI等等,除了后 ...
- 剑指OFFER之反转链表（九度OJ1518）
题目描述: 输入一个链表,反转链表后,输出链表的所有元素.(hint : 请务必使用链表) 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一行为一个整数n(0<= ...
- .NET通用权限系统快速开发框架
DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...
- Java中的Annotation(2)----Annotation工作原理
Java中的Annotation(2)----Annotation工作原理 分类: 编程语言2013-03-18 01:06 3280人阅读 评论(6) 收藏 举报 上一篇文章已经介绍了如何使用JDK ...
- 最小较小codeforces 2B The least round way
查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 求从左上角到右下角所经过的数字之积末端所含0最小的个数 终究的积可以当作A*2^x*5^y, ...
- Python 动态语言
1.在C++中,Animal a = Person(); 这样写是不行的,因为a的内容不能使用Person的内容来填充. 2.在Python中,变量不需要声明,而且可以赋任何值.Python是如何做到 ...
- Educational Codeforces Round 2 C. Make Palindrome 贪心
C. Make Palindrome Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/pr ...
- xml文件格式例如以下
xml文件格式例如以下: <?xml version="1.0" encoding="utf-8"?> <us ...