remove corner of boxes and add shadow

Question

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 .

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Apr 18 '16 at 15:07
my question is how to 'remove corner of boxes and add shadow?' — foxy, Apr 18 '16 at 15:10
Yes, we get that...and you're at least supposed to do something yourself before just asking us to do it. — Paulie_D, Apr 18 '16 at 15:11

score 0 · Accepted Answer · edited Apr 18 '16 at 15:50

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);
}

remove corner of boxes and add shadow

1 Answers1