本文篇幅较长，希望能坚持看完，转载请注明出处，如果觉得好文请给个赞吧
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实现平行四边形
我们既然有了三角形和梯形或者长方形，可以得到平行四边型呢！！！！
首先，先来两个三角形，如下
再通过CSS3中的transform属性将两个三角形移动下位置，就可以实现自己的要求啦。当然你也可以用绝对定位来移动。
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：
CSS”实现对话框效果一
<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：
CSS实现对话框效果二
<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实现正方形
使用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+支持)
分类: H5+CSS3
原文地址：https://www.cnblogs.com/WWZ1515389790/p/8695420.html