HTML CSS examples for CSS Property:box-shadow
Box-shadow falls outside container
<html> <head> <style> .container>div { display:inline-block; margin-bottom:21px; margin-top:3px; } .container {<!-- ww w . j a v a 2s . c o m--> width:100%; height:100%; border:3px solid Chartreuse; display:inline-block; -moz-box-sizing:border-box; box-sizing:border-box; padding-right:11px; } .left-block { float:left; border:2px solid yellow; width:351px; height:126px; background:transparent; clear:right; margin-top:11px; box-shadow:11px 11px 6px blue; } .right-block { float:right; border:2px solid pink; width:351px; height:126px; background:transparent; clear:right; margin-top:31px; box-shadow:11px 11px 6px OrangeRed; } .block-head { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-position:-3px -180px; border:2px solid grey; margin:0; height:22px; background-repeat:repeat-x; } .triangle { float:left; border-top:11px solid BlueViolet; border-bottom:11px solid Chartreuse; border-left:16px solid yellow; } .title { float:left; margin-left:11px; font-size:17px; font-weight:bold; font-family:Cambria (Headings); } </style> </head> <body> <div class="container"> <div class="left-block"> <div class="block-head"> <div class="triangle tcolor"></div> <div class="title tcolor"> Lorem ipsu </div> </div> </div> <div class="right-block"> <div class="block-head"> <div class="triangle tcolor"></div> <div class="title tcolor"> Lorem ipsum </div> </div> </div> <div class="left-block"> <div class="block-head"> <div class="triangle tcolor"></div> <div class="title tcolor"> Lorem ipsu </div> </div> </div> <div class="right-block"> <div class="block-head"> <div class="triangle tcolor"></div> <div class="title tcolor"> Lorem ipsu </div> </div> </div> </div> </body> </html>