首页 > > 网页制作 > css >

CSS实现三角形、梯形、平行四边形、圆形、椭圆形…

2018-06-24 02:20:20来源：未知阅读 ()

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

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">&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实现对话框效果二

<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实现正方形

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