I want to create a box .
I want remove a part of my box that is at the right bottom of my box . And i need to place a box shadow at the removed part like this cyan part:
*I don't want rounded corner .
Try it example. But as the guys said, first try it yourself then something yourself before just asking us to do it.
.box{
position:relative;
width:300px;
height:300px;
background: #2B5891;
}
.box:before {
content: '';
position: absolute;
bottom: 0; right: 0;
border-bottom: 80px solid rgba(255, 255, 255, 0.94);
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
border-left: 80px solid #2B5891;
width: 0;
}
.shadow{
position: absolute;
width: 100px;
height: 110px;
background: #2B5891;
bottom: 20px;
right: 25px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(45deg);
box-shadow: 10px 0px 9px -6px rgba(0,0,0,0.5);
}