小さな切り欠きのある箱が欲しいのですが。このボックスには、同じ形状のオーバーレイシャドウがあります。以下は、影と背景の両方を使った私の試みです。
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;
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 */
}
同じカットアウェイを含むシャドウオーバーレイを作成する方法について何か提案はありますか?これを行う簡単な方法はありますか?
注:シャドウとボックスを分離する理由は、オーバーレイが同じままで、背景色のjQueryアニメーションを使用するためです。