css - 有没有办法只使用 CSS 来获得倾斜的盒子阴影？

Question

我想要类似CSS-Tricks上的徽标，但使用 CSS 而不是图像文件，因此可以调整其大小。这可能吗？

像这样的图像：

Answer 1

带有切角的纯 CSS 倾斜阴影

这需要一段时间来完善，但现在它在横幅下方有一个倾斜的阴影，它也有切角和多个边框。所有的效果，包括背景、标志和阴影，都是用纯 CSS 生成的。

在 jsFiddle 上查看

HTML

<div class="wrapper">
 <div>
  <h1><span>CSS</span>-Tricks</h1>
  <h2>A Web Design Community</h2>
 </div>
</div>
<div class="body">
 <div></div>
</div>

CSS

<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>