How can I achieve a seamless shadow effect at the border-right of a small div that matches the shadow of a larger div, without cutting off at the border-bottom of the small div or the border-top of the large div? I am unable to use Z-index due to the complexity of my website, and Spread is not an option as it detracts from the 3D appearance.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="small"></div>
<div id="large"></div>
</body>
</html>
And the corresponding CSS:
#small {
border: 1px solid black;
width: 200px;
height: 50px;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
Here is a link to the JS Bin for reference: http://jsbin.com/vijujaweja/edit
I realize the format of my question may be a bit unclear, but I appreciate your understanding.