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*/
}

转载于:https://www.cnblogs.com/gucan/p/6746607.html