@charset "utf-8";

/***CSS3切角标题板***/

.tucked-corners-top {
font-weight: bold;
font-size: 55px;
position: relative;
width: 80%;
min-height: 100px;
margin: 30px 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: 51% 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);
}


.tucked-corners-bottom a {
font-family: Georgia, "Times New Roman", Times, serif;
background:rgba(70,120,231,1);
background : -webkit-gradient(linear, left top, left bottom, from(rgba(70,120,231,1)), to(rgba(36,61,127,1)));
background : -moz-linear-gradient(top, rgba(70,120,231,1), rgba(36,61,127,1));
color: #fff;
text-align: center;
border: 2px solid #072266;

line-height: 45px;
position: relative;box-shadow: 0 0 4px rgba(0,0,0,0.4);
box-shadow: 0 0 4px rgba(0,0,0,0.4);
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.tucked-corners-bottom a {width: 64px;
height: 64px;
border-width: 1px;
line-height: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 5px;
border-radius: 5px;display:inline-block;
}


Back to home | File page

Subscribe | Register | Login | N