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

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

新老客户大回馈,云服务器低至5折

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

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:盒子模型折磨人!!!个人简历来一份

下一篇:水平,垂直居中的15种方法