css之创建常用图形

 

css 创建常用图形

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

• 圆形
  

 

.circle{
        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*/
}