CSS3 Tucked Corners

这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处，简单明了，也是我常常去逛的一个网站。今天收到一个CSS3效果，就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角，同时使用旋转transform以及定位到每个角落上，其中最难的一点就是，使用gradient制作了四个切角效果，这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

demodownload

HTML CODE

<div class="tucked-corners-top">
  <div class="tucked-corners-bottom">
    CSS3 Tucked Corners
  </div>
</div>

CSS CODE

body {
  background: #eac996 url(wood.png);
}
.tucked-corners-top {
  position: relative;
  width: 500px; min-height: 200px;
  margin: 100px auto; padding: 20px;
  background-color: #fff; /* Fallback */			
  background: 
    -webkit-linear-gradient(45deg,  transparent 10px, #fff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
  background: 
    -moz-linear-gradient(45deg,  transparent 10px, #fff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #fff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #fff 10px);
  background: 
    -o-linear-gradient(45deg,  transparent 10px, #fff 10px),
    -o-linear-gradient(135deg, transparent 10px, #fff 10px),
    -o-linear-gradient(225deg, transparent 10px, #fff 10px),
    -o-linear-gradient(315deg, transparent 10px, #fff 10px);	        
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);			
}
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
  content: '';
  position: absolute;
  height: 20px; 
  width: 80px;
  box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
  box-shadow: none\9; /* Do not show on IE9 #needed */			
}
.tucked-corners-top::before,
.tucked-corners-top::after {
  top: -10px;
}

.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
  bottom: -10px;
}		
.tucked-corners-top::before,
.tucked-corners-bottom::before {
  left: -42px;
}
.tucked-corners-top::after,
.tucked-corners-bottom::after {
  right: -42px;
}
.tucked-corners-top::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tucked-corners-top::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);			
}

.tucked-corners-bottom::before {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.tucked-corners-bottom::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

特别声明：此案例代码来自于：red team design

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-tucked-corners.html

英文地址：http://www.red-team-design.com/css3-tucked-corners