答案 0 :(得分:2)
这需要一段时间才能完美,但它现在在横幅下方有一个倾斜的阴影,也有切角和多个边框。所有效果,包括背景,徽标和阴影,都是使用纯CSS生成的。
<div class="wrapper">
<div>
<h1><span>CSS</span>-Tricks</h1>
<h2>A Web Design Community</h2>
</div>
</div>
<div class="body">
<div></div>
</div>
<style type="text/css">
body {
min-width:600px;
background-image:-webkit-repeating-linear-gradient(135deg, #d8d2ce, #d8d2ce 6px, #ccc6c3 7px, #d8d2ce 8px);
background-image:repeating-linear-gradient(135deg, #d8d2ce, #d8d2ce 6px, #ccc6c3 7px, #d8d2ce 8px);
background-color:#d8d2ce;
}
.wrapper {
position:relative;
margin:77px 46% 10% -10%;
}
.wrapper div:after,
.wrapper div:before {
content:".";
font-size:0;
color:transparent;
background-color:#bcb9b7;
position:absolute;
right:-12px;
height:50%;
width:40px;
padding-top:2.5px;
border-right:8px solid #afafaf;
}
.wrapper div:after {
background-image:
linear-gradient(90deg, transparent, transparent 38px, #c5c5c5 38px, #c5c5c5 40px),
linear-gradient(180deg, #c5c5c5 0px, #c5c5c5 2px, transparent 2px);
border-top:8px solid #afafaf;
top:-10px;
-webkit-transform-origin:100% 0;
-webkit-transform: skewX(25deg);
-ms-transform-origin:100% 0;
-ms-transform: skewX(25deg);
transform-origin:top right;
transform: skewX(25deg);
}
.wrapper div:before {
background-image:
linear-gradient(90deg, transparent, transparent 38px, #c5c5c5 38px, #c5c5c5 40px),
linear-gradient(0deg, #c5c5c5, #c5c5c5 2px, transparent 2px);
border-bottom:8px solid #afafaf;
bottom:-10px;
right:-12px;
-webkit-transform-origin:100% 100%;
-webkit-transform: skewX(-25deg);
-ms-transform-origin:100% 100%;
-ms-transform: skewX(-25deg);
transform-origin:bottom right;
transform: skewX(-25deg);
}
.wrapper div {
background:#bcb9b7;
position:relative;
z-index:2;
top:-8px;
left:-8px;
border:2px solid #c5c5c5;
box-shadow:0 0 0 8px #afafaf;
text-align:right;
text-transform:uppercase;
font-family:sans-serif;
color:#ffffff;
font-size:40px;
letter-spacing:.05em;
padding:.55em .7em .55em;
}
.wrapper div h1:after {
content:"*";
color:#e5e1de;
font-weight:bold;
position:relative;
top:-.4em;
font-size:.9em;
}
.wrapper div span {
color:#444444;
}
.wrapper div h1 {
}
.wrapper div h2 {
font-size:.26em;
letter-spacing:.4em;
font-weight:bold;
color:#807B77;
font-family:serif;
margin-top:.2em;
}
.wrapper:before {
content:".";
font-size:0;
color:transparent;
display:block;
width:100%;
height:90%;
position:absolute;
left:0;
top:0;
background:rgba(0,0,0,.5);
box-shadow:0 0 12px 15px rgba(0,0,0,.5);
-webkit-transform-origin:100% 100%;
-webkit-transform: translate(-4px,10px) scale(.5, .5) matrix(1, .021, 0, 1, 10, 0) skewX(-25deg);
-ms-transform-origin:100% 100%;
-ms-transform: translate(-4px,10px) scale(.5, .5) matrix(1, .021, 0, 1, 10, 0) skewX(-25deg);
transform-origin:100% 100%;
transform: translate(-4px,10px) scale(.5, .5) matrix(1, .021, 0, 1, 10, 0) skewX(-25deg);
z-index:1;
}
.wrapper:after {
content:".";
font-size:0;
color:transparent;
display:block;
width:100%;
height:90%;
position:absolute;
left:0;
top:0;
background:rgba(0,0,0,.5);
box-shadow:0 0 12px 15px rgba(0,0,0,.5);
-webkit-transform-origin:100% 0;
-webkit-transform: translate(-4px,-4px) scale(.5, .5) matrix(1, .021, 0, 1, 10, 0) skewX(25deg);
-ms-transform-origin:100% 0;
-ms-transform: translate(-4px,-4px) scale(.5, .5) matrix(1, .021, 0, 1, 10, 0) skewX(25deg);
transform-origin:100% 0;
transform: translate(-4px,-4px) scale(.5, .5) matrix(1, .021, 0, 1, 10, 0) skewX(25deg);
z-index:1;
}
.body {
border:8px solid rgba(0,0,0,0);
box-shadow:0 0 5px rgba(0,0,0,.3);
position:absolute;
top:165px;
margin-left:13%;
width:80%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.body div {
height:200px;
background:white;
}
</style>