有什么办法有倾斜的盒子阴影只使用CSS？ [英] Is there any way to have slanted box-shadows using only CSS?
本文介绍了有什么办法有倾斜的盒子阴影只使用CSS？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要类似
HTML
< div class =wrapper>
< div>
< h1>< span> CSS< / span> -Tricks< / h1>
< h2>网页设计社区< / 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），
线性梯度（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;
字母间距：.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>
I want something like the logo on CSS-Tricks, but with CSS instead of an image file so it can be resized. Is this possible?
Something like this image:
解决方案
Pure CSS Slanted Shadow with Cut Corners
This took a little while to perfect, but it now has a slanted drop shadow under the banner which also has cut corners and multiple borders. All effects, including the background, logo, and shadow, are generated with pure CSS.
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>
这篇关于有什么办法有倾斜的盒子阴影只使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
