css之创建常用图形

css 创建常用图形

网站中有一些常见的图形用css就可以实现出来，本人就此总结了几种常用的css图形画法，引用链接http://www.cnblogs.com/lovemomo/p/4878293.html

• 圆形
  
  

.circle{        margin-top:50px;        width: 100px;        height: 100px;        background:red;        -moz-border-radius:50px;        -webkit-border-radius:50px;        border-radius: 50px;    }

• 月亮
  
  

.moon{        width: 80px;        height: 80px;        border-radius: 50%;        box-shadow: 15px 15px 0 0 red;    }

• 上三角
  
  

.triangle-up {        width: 0;        height: 0;        border-left:50px solid transparent;        border-right: 50px solid transparent;        border-bottom: 50px solid #ccc;    }

下三角同理

• 左三角:

  

.triangle-left {        width: 0;        height: 0;        border-top:50px solid transparent;        border-right: 50px solid #ccc;        border-bottom: 50px solid transparent;    }

右三角同理

• 左上三角:
  
  

.triangle-topleft {        width: 0;        height: 0;        border-top: 50px solid #ccc;        border-right:50px solid transparent;    }

• 右下三角:
  
  

    .triangle-bottomleft {        width: 0;        height: 0;        border-bottom: 50px solid #ccc;        border-left:50px solid transparent;    }

• 实心三角边框: <div id="demo"></div>
  
  

#demo{    width: 100px;    height: 100px;    background-color: #333;    position: relative;      }#demo:after{    border:solid transparent;    border-left-color:#333;    border-width:10px;    width:0;    content:" ";    position:absolute;    left:100%;    top:10%;  }

• 空心三角边框:<div id="demo"></div>
  
  

#demo{    width: 100px;    height: 100px;    background-color:#fff;    position:relative;    border: 2px solid #000;    /*整体颜色边框是黑色*/}/*小三角*/#demo:after{    border:solid transparent;    border-left-color:#fff;    border-width:10px;    content:" ";    position:absolute;    left:100%;    top:20px;    /*20px*/}/*大三角*/#demo:before{    border:solid transparent;    border-left-color:#000;    border-width:12px;   /*10px+2px*/    content:" ";    position:absolute;    left:100%;    top:18px;    /*20px-2px*/}