Div背景阴影以适应自定义CSS形状 [英] Div background shadow to fit custom CSS shape
问题描述
我想要一个有小切口的盒子。此框具有相同形状的覆盖阴影。
以下是我对阴影和背景的尝试。
http://jsfiddle.net/roman_khrystynych/EH7mu/2/
HTML内容
< body>
< div class =box>
< div class =background>< / div>
< div class =shadow>< / div>
< div class =content>
Content
< / div>
< / div>
< / body>
CSS
body {
background：＃222;
}
box {
height：135px;
width：450px;
}
.content {
position：absolute;
margin-left：120px;
margin-top：-120px;
}
.background {
margin-left：50px;
职位：亲属;
height：135px;
width：400px;
背景：#fff;
}
.background：在{
位置：绝对;
bottom：0px;左：-20px;
内容：。;
text-indent：-999px;溢出：隐藏;
display：block;
width：0px;高度：0像素;
border-top：20px solid #fff;
border-left：20px实心透明;
}
.background：之前{
位置：绝对;
top：0;左：-20px;
内容：＃;
text-indent：-999px;溢出：隐藏;
display：block;
背景：#fff;
width：20px;高度：115px;
}
.shadow
{
margin-left：30px;
width：420px;
height：135px;
margin-top：-135px;
位置：绝对;
background：-moz-linear-gradient（top，rgba（181,181,181,0）0％，rgba（163,163,163,0）51％，rgba（145,145,145,0.36）100％）; / * FF3.6 + * /
background：-webkit-gradient（线性，左上，左下，停止颜色（0％，rgba（181,181,181,0）），停止颜色（51％，rgba （163,163,163,0）），色停（100％，rgba（145,145,145,0.36）））; / * Chrome，Safari4 + * /
background：-webkit-linear-gradient（top，rgba（181,181,181,0）0％，rgba（163,163,163,0）51％，rgba（145,145,145,0.36）100％）; / * Chrome10 +，Safari5.1 + * /
背景：-o-linear-gradient（top，rgba（181,181,181,0）0％，rgba（163,163,163,0）51％，rgba（145,145,145,0.36）100 ％）; / * Opera 11.10+ * /
background：-ms-linear-gradient（top，rgba（181,181,181,0）0％，rgba（163,163,163,0）51％，rgba（145,145,145,0.36）100％）; / * IE10 + * /
背景：线性梯度（至底部，rgba（181,181,181,0）0％，rgba（163,163,163,0）51％，rgba（145,145,145,0.36）100％）; / * W3C * /
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃00b5b5b5'，endColorstr ='＃5c919191'，GradientType = 0）; / * IE6-9 * /
}
有关如何制作影子叠加层的任何建议还包含相同的切割？有没有更简单的方法来做到这一点？
注意：分隔阴影和框的原因是为背景颜色制作jQuery动画，而叠加层保持同样的。
我不清楚你到底想要什么。
无论如何，由于没有人给你答案，我想我可以帮助你。
这个html：
< div class =clip>
< div class =inner> aaaaa< / div>
< / div>
如果你给这个CSS：
.clip {height：173px;宽度：181px; left：85px;顶部：74px;位置：绝对;
overflow：hidden;
-webkit-transform：rotate（50deg）;
background-color：rgba（200，0，0，0.1）;}
.inner {
-webkit-transform：rotate（-50deg）;
background-color：blue;
height：100px; width：150px; left：16px; top：52px; position：absolute;}
你会在你的内部div中得到一个你想要的截断矩形。
外部div被旋转并且启用了裁剪，所以它会给你一个对角剪辑。
然后，将内部矩形放置在剪辑div内，以便它仅剪切在左下角。你反转这个div，使它再次水平。
现在你可以随心所欲地做任何事情（我还没有使用任何背景或边界属性） ，或在另一个内部div，而不会松动形状。
只要注意定位内部div是非常棘手的，你就是在旋转坐标系下做的！
剪辑div是半透明的演示颜色。
小提琴
I would like a box that has a small cut away. This box has an overlay shadow that has the same shape. Below is my attempt with both the shadow and the background.
http://jsfiddle.net/roman_khrystynych/EH7mu/2/
HTML Content
<body>
<div class="box">
<div class="background"></div>
<div class="shadow"></div>
<div class="content">
Content
</div>
</div>
</body>
CSS
body{
background: #222;
}
box{
height: 135px;
width: 450px;
}
.content{
position:absolute;
margin-left: 120px;
margin-top: -120px;
}
.background{
margin-left:50px;
position:relative;
height:135px;
width:400px;
background:#fff;
}
.background:after{
position:absolute;
bottom:0px; left:-20px;
content:".";
text-indent:-999px; overflow:hidden;
display:block;
width:0px; height:0px;
border-top: 20px solid #fff;
border-left: 20px solid transparent;
}
.background:before{
position:absolute;
top:0; left:-20px;
content:"#";
text-indent:-999px; overflow:hidden;
display:block;
background:#fff;
width:20px; height:115px;
}
.shadow
{
margin-left:30px;
width:420px;
height: 135px;
margin-top: -135px;
position:absolute;
background: -moz-linear-gradient(top, rgba(181,181,181,0) 0%, rgba(163,163,163,0) 51%, rgba(145,145,145,0.36) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,181,181,0)), color-stop(51%,rgba(163,163,163,0)), color-stop(100%,rgba(145,145,145,0.36))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(181,181,181,0) 0%,rgba(163,163,163,0) 51%,rgba(145,145,145,0.36) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b5b5b5', endColorstr='#5c919191',GradientType=0 ); /* IE6-9 */
}
Any suggestion on how to make the shadow overlay also containing the same cut away? Is there an easier way to do this?
Note: the reason for separating the shadow and the box is to have a jQuery animation for the background color while the overlay stays the same.
It's not clear to me what are you really intending. Anyway, since nobody has given you an answer, I think I can help you.
for this html:
<div class="clip">
<div class="inner">aaaaa</div>
</div>
if you give this css:
.clip {height: 173px; width: 181px; left: 85px; top: 74px;position: absolute;
overflow: hidden;
-webkit-transform: rotate(50deg);
background-color: rgba(200, 0, 0, 0.1);}
.inner {
-webkit-transform: rotate(-50deg);
background-color: blue;
height: 100px;width: 150px;left: 16px;top: 52px;position: absolute;}
You will get the rectangle with a cutoff that you want in your inner div.
The outer div is rotated and has clipping enabled, so that it gives you a diagonal clipping.
Then you position the inner rectangle inside the clip div, so that it is only clipped in the left bottom corner. You counter-rotate this div so that it is horizontal again.
Now you can do whatever you want with it (I haven't used any background or border property yet), or in another inner div, without loosing the shape.
Only be warned that positioning the inner div is tricky, you are doing it in rotated coordinates !
The clipping div is semitransparently colored for the demo.
fiddle
这篇关于Div背景阴影以适应自定义CSS形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
