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>