CSS（七）实现各种形状和对话框

##CSS实现梯形
CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。

首先我们先给一个正方形设置比较宽的边框。如下。

代码如下：

然后把其他颜色设置成看不见的颜色，我们就得到了梯形

代码如下：

##CSS实现三角形
只要把中间的正方形的宽高设为0就行

代码如下

##CSS实现平行四边形
首先，先来两个三角形，如下

代码如下：

再通过CSS3中的transform属性将两个三角形移动下位置，就可以实现自己的要求啦。当然你也可以用绝对定位来移动。

##CSS实现圆形
使用CSS3属性border-radius可以实现一个圆形。

代码如下：

##CSS实现椭圆形
border-radius有一个水平半径和一个垂直半径。
border-radius: 水平半径 / 垂直半径;//当然也可以单独设置某个角的水平半径和垂直半径。
border-radius: 左上角水平半径、 右上角水平半径、 右下角水平半径、 左下角水平半径 / 左上角垂直半径、 右上角垂直半径、 右下角垂直半径、 左下角垂直半径。

实现一个椭圆形

代码如下：

等价于

##CSS实现对话框

主要实现原理就是通过两个三角形的“叠加覆盖”，来形成对话框的尖角

样例1：

 

 

CSS实现对话框效果一

代码如下：

	
 
	
 
	CSS实现对话框效果一

样例2：

CSS实现对话框效果e二

代码如下：

	

	

	CSS实现对话框效果e二

样例3

 

 

CSS实现对话框效果三

代码如下：

	
 
	
 
	CSS实现对话框效果三

###补充：css中的单位
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸
pc:pica，大约6pt，1/6寸
ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)
ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)