IMG_6646.GIF
效果如圖
div部分
<div class="servicesItem"></div>
只需要一個(gè)div，通過控制他的before偽類實(shí)現(xiàn)效果
css部分
.servicesItem{
position: relative;
padding: 15px;
background: #f2f2f2;
border: 1px solid white;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.servicesItem:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 25px 25px 0;
border-style: solid;
border-color: white white #cccccc #cccccc;
background: #cccccc;
display: block;
width: 0;
-webkit-transition: all 1.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-box-shadow: -2px 2px 3px -1px #b3b3b3;
-moz-box-shadow: -2px 2px 3px -1px #b3b3b3;
-o-box-shadow: -2px 2px 3px -1px #b3b3b3;
box-shadow: -2px 2px 3px -1px #b3b3b3;
}
.servicesItem:hover{
background: white;
border: 1px solid #b3b3b3;
}
.servicesItem:hover::before{
border-width: 0;
}
