CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

本文篇幅较长，希望能坚持看完，转载请注明出处，如果觉得好文请给个赞吧

CSS实现梯形

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

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

  #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 }  

<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>

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

 

  #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 }

<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>

此外，我们通过设置不同边框的宽度或者颜色，可以得到不一样的三角形或者梯形   #test3 { width: 0; height: 0; background: transparent; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent }              

 CSS实现平行四边形

我们既然有了三角形和梯形或者长方形，可以得到平行四边型呢！！！！

首先，先来两个三角形，如下

#test5 { width: 0; height: 0; display: inline-block; background: transparent; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid green; border-right: 0px solid transparent } #test4 { 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: 0px solid transparent }      再通过CSS3中的transform属性将两个三角形移动下位置，就可以实现自己的要求啦。当然你也可以用绝对定位来移动。 #trangle1 { width: 0; height: 0; background: transparent; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent } #trangle2 { width: 0; height: 0; background: transparent; border-top: 50px solid red; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent }     #trangle3 { width: 0; height: 0; background: transparent; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent } #trangle4 { width: 0; height: 0; background: transparent; border-top: 50px solid red; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent }

 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”实现对话框效果一 .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 }

<div class="test1">
<div class="bot">&nbsp;</div>
<div class="top">&nbsp;</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实现对话框效果二 .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 }

 

<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">&nbsp;</div>
<div class="top">&nbsp;</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实现正方形 #test7 { width: 400px; background: gray } .placeholder { width: 30%; padding-bottom: 30%; height: 0; background: #4acfff }

<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+支持)