本文篇幅较长，希望能坚持看完，转载请注明出处，如果觉得好文请给个赞吧
CSS实现梯形
CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。
首先我们先给一个正方形设置比较宽的边框。如下。
<div id="test1"></div> <style> #test1{ width: 50px; height: 50px; background: purple; border-top: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; border-right: 50px solid yellow; margin:0 auto; } </style>
然后把其他颜色设置成看不见的颜色，我们就得到了梯形
<div id="test2"></div> <style> #test2{ width: 50px; height: 50px; background: transparent; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent; } </style>
CSS实现三角形
三角形同理可得，只要把中间的正方形的宽高设为0就行，如下
<div id="test3"></div> <style> #test3{ width: 0; height: 0; display: inline-block; background: transparent; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent; } </style>
CSS实现平行四边形
我们既然有了三角形和梯形或者长方形，可以得到平行四边型呢！！！！
首先，先来两个三角形，如下
CSS实现圆形
使用CSS3属性border-radius可以实现一个圆形。
<div id="circle"></div> <style> #circle{ width: 100px; height: 100px; background: blue; border-radius: 50px; } </style>
CSS实现椭圆形
这时候我们就要好好了解下border-radius这个属性了，border-radius有一个水平半径和一个垂直半径
border-radius: 水平半径 / 垂直半径;//当然也可以单独设置某个角的水平半径和垂直半径
border-radius: 左上角水平半径、 右上角水平半径、 右下角水平半径、 左下角水平半径 / 左上角垂直半径、 右上角垂直半径、 右下角垂直半径、 左下角垂直半径
好了那么我们就可以实现一个椭圆形了
<div id="oval"></div> <style> #oval{ width: 100px; height: 50px; background: blue; border-radius: 50px / 25px; } </style>
等价于
<div id="oval"></div> <style> #oval{ width: 100px; height: 50px; background: blue; border-top-left-radius: 50px 25px; border-top-right-radius: 50px 25px; border-bottom-left-radius: 50px 25px; border-bottom-right-radius: 50px 25px; } </style>
CSS实现对话框
好了有了之前的三角形、椭圆形，我们就可以形成各种各样的对话框啦~~~~~~
主要实现原理就是通过两个三角形的“叠加覆盖”，来形成对话框的尖角
样例1：
<div class="test1"> <div class="bot"> </div> <div class="top"> </div> CSS实现对话框效果一 </div> <style> .test1{width:300px;height: 30px; padding:30px 20px; margin-left:100px; background: #eb7956; position:relative;} .test1 div{ width:0; height:0; position:absolute;} .test1 .bot{ border-width:20px; border-style:solid; border-color:#ffffff #eb7956 #eb7956 #ffffff; left:-40px; top:40px; } .test1 .top{ border-width:10px 20px; border-style:solid; border-color: transparent #ffffff #ffffff transparent ; left:-40px; top:60px; } </style>
样例2：
<div class="test2"> <div class="bot"></div> <div class="top"></div> CSS实现对话框效果e二 </div> <style> .test2{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;} .test2 div{width:0; height:0; font-size:0; overflow:hidden; position:absolute;} .test2 div.bot{ border-width:20px; border-style:solid dashed dashed; border-color:#beceeb transparent transparent; left:80px; bottom:-40px; } .test2 div.top{ border-width:20px; border-style:solid dashed dashed; border-color:#ffffff transparent transparent; left:80px; bottom:-33px; } </style>
样例3
<div class="test3"> <div class="bot"> </div> <div class="top"> </div> CSS实现对话框效果三 </div> <style> .test3{ width:300px; height: 30px; border-radius: 160px/45px; padding:30px 20px; margin-left:100px; background: #eb7956; position:relative; } .test3 div{ width:0; height:0; position:absolute;} .test3 .bot{ border-width:20px; border-style:solid; border-color:transparent #eb7956 #eb7956 transparent; left:-30px; top:40px; } .test3 .top{ border-width:10px 20px; border-style:solid; border-color: transparent #ffffff #ffffff transparent ; left:-30px; top:60px; } </style>
此外，IE6下有些bug需要做下兼容
1. IE6的奇偶bug
如果定位外框高度或是宽度为奇数，则IE6下，绝对定位元素的低定位和右定位会有1像素的误差。所以，尽量保证外框的高度或宽度为偶数值。
2. IE6的空div莫名高度bug
IE6下，空div会有莫名的高度，也就是说height:0;不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用font-size:0; + overflow:hidden;修复此问题。
3. IE6不支持实线边框透明transparent属性
IE6不支持实线边框透明transparent属性，当某边框设置为transparent属性，且有宽度的话，那么透明会以默认的黑色显示的。解决方法有两个，一是将需要隐藏的颜色设置为背景色，这样与透明效果一样，此法有局限性，在复杂“边框法”应用下是行不通的；二是可以使用dashed代替solid，可以实现IE6下边框transparent透明。为什么能够实现透明？您可以参考默尘的这篇文章Dotted&Dashed终极分析及IE6透明边框，我说点题外话，其对原因的解释似乎说的通，但是，是不是如此，我是相当怀疑的，我尚未有时间验证，这个可以标记一下。
参考：CSS实现气泡边框
CSS实现自适应正方形
正方形应该大家都会，那么如何实现自适应的正方形呢？有两种方法
方法一：使用padding-bottom实现正方形
<div id="test7"> <div class="placeholder">使用padding-bottom实现正方形</div> </div> <style> #test7{ width: 400px; background: gray; } .placeholder { width: 30%; padding-bottom: 30%;/* padding百分比相对父元素宽度计算,用padding去填充height*/ height: 0;/*避免被内容撑开多余的高度 */ background: #4acfff; } </style>
方法二：使用css3单位vw
原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦
<div class="vw"></div> <style> .vw { width: 50%; height: 50vw; background: pink; } </style>
补充：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+支持)