css实现三角形图形
作者:jit 日期:2017-02-14
<style>
div{
margin-top: 10px;
float: left;
text-align: center;
}
/*--css--*/
.box_left{
position: relative;
padding: 0 20px;
width: 80px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
margin-left: 50px;
}
.box_left:after{
position: absolute;
top: 50%;
left: -15px;
z-index: 1;
display: block;
margin-top: -15px;
width: 0;
border-color: transparent #efefef transparent #efefef ;
border-style: solid;
border-width: 15px 15px 15px 0;
content: "";
}
.box_right{
position: relative;
padding: 0 20px;
width: 80px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
margin-left: 50px;
}
.box_right:after{
position: absolute;
top: 50%;
right: -15px;
z-index: 1;
display: block;
margin-top: -15px;
width: 0;
border-color: transparent #efefef transparent #efefef ;
border-style: solid;
border-width: 15px 0 15px 15px;
content: "";
}
.box_up{
position: relative;
padding: 0 20px;
width: 80px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
margin-left: 50px;
}
.box_up:after{
position: absolute;
top: -15px;
left: 50%;
z-index: 1;
display: block;
margin-left: -15px;
height: 0;
border-color: #efefef transparent #efefef transparent;
border-style: solid;
border-width: 0 15px 15px 15px;
content: "";
}
.box_down{
position: relative;
padding: 0 20px;
width: 80px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
margin-left: 50px;
}
.box_down:after{
position: absolute;
bottom: -15px;
left: 50%;
z-index: 1;
display: block;
margin-left: -15px;
width: 0;
border-color: #efefef transparent #efefef transparent;
border-style: solid;
border-width: 15px 15px 0 15px;
content: "";
}
</style>
<body>
<div class="box_left">Left</div>
<div class="box_right">Right</div>
<div class="box_up">Up</div>
<div class="box_down">Down</div>
</body>
</html>
上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论