标签：
body{
font-family: cursive;
font-size: 14px;
}
.left{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.left:before{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
left: -30px;
top: 10px;
border: 15px solid;
border-color: transparent green transparent transparent;
}
.left:after{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
left: -27px;
top: 10px;
border: 15px solid;
border-color: transparent #fff transparent transparent;
}
.right{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.right:before{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
right: -30px;
top: 10px;
border: 15px solid;
border-color: transparent transparent transparent green;
}
.right:after{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
right: -27px;
top: 10px;
border: 15px solid;
border-color: transparent transparent transparent #fff;
}
.up{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.up:before{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
left:60px;
top: -30px;
border: 15px solid;
border-color: transparent transparent green transparent ;
}
.up:after{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
left:60px;
top: -27px;
border: 15px solid;
border-color: transparent transparent #fff transparent;
}
.down{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.down:before{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
left:60px;
top: 50px;
border: 15px solid;
border-color: green transparent transparent transparent ;
}
.down:after{
content: ‘ ‘;
position: absolute;
width: 0;
height: 0;
left:60px;
top: 48px;
border: 15px solid;
border-color: #fff transparent transparent transparent ;
}
.line{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.line:before{
border-bottom: 1px solid #3ca156;
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
content: ‘‘;
width: 92px;
position: absolute;
left: 30px;
top: 50%;
}
.line:after{
border-bottom: 1px solid #3ca156;
-webkit-transform: skewY(-30deg);
transform: skewY(-30deg);
content: ‘‘;
width: 92px;
position: absolute;
left: 30px;
top: 50%;
}
.fork{
color: #fff;
width:150px;
height: 60px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 60px;
text-align: center;
background: green;
}
.fork:before{
content: "";
border: 30px solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0px;
left: 0px;
}
.fork:after{
content: "";
border: 30px solid;
border-color: transparent transparent transparent green;
position: absolute;
top: -0px;
right: -60px;
}
.fork-left{
color: #fff;
width:150px;
height: 60px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 60px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-left:before{
content: "";
border: 30px solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0px;
left: 0px;
}
.fork-right{
color: #fff;
width:150px;
height: 60px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 60px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-right:after{
content: "";
border: 30px solid;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 0px;
right: 0;
}
.fork-up{
color: #fff;
width:60px;
height: 150px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 150px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-up:after{
content: "";
border: 30px solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: 90px;
right: 0;
}
.fork-down{
color: #fff;
width:60px;
height: 150px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 150px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-down:before{
content: "";
border: 30px solid;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 0;
right: 0;
}
标签：
原文地址：http://my.oschina.net/51shareweb/blog/393960
