首页 > 代码库 > css之创建常用图形
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*/
}css之创建常用图形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。