Search code examples
cssuser-interfacebox-shadow

remove corner of boxes and add shadow


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:

like this cyan part

*I don't want rounded corner .


Solution

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