CSS folded corners of div with shadow

Question

I have div blocks with rounded corners box-shaddow:

.itemapplication {
    position:relative;
    overflow:hidden;
    border-radius: 10px;
    width: 180px;
    height: 225px;
    float: left;
    box-shadow: 0px 5px 1px 0px #bfc4c8;
}

and I want to make corner fold. Here is my code so far:

.itemapplication:before {
   content:"";
   position:absolute;
   top:-1px;
   right:-1px;
   border-style:solid;
   border-width:20px;
   border-color:#eceff4 #eceff4 red red;
   -webkit-border-bottom-left-radius:10px;
   -moz-border-radius:0 0 0 10px;
   border-radius:0 0 0 10px;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

And here is what I get:

As you can see, there is thin line on the right side of div and I cant move it away. Any advice how to do that?

Answer 1

By using clip-path you can neatly cut off the 'excess' space. By using the CSS calc() method we can compute how big the offsets need to be by plugging in the border offset values.

For example, here I modified your box shadow for demonstration purposes to 5px.

Box shadow offset + spread = 6px. I plug this value in the relevant clip path computations so the shadow + spread effect won't get clipped.

I also added in some shadow offset for the fold at steps 3 - 5.

clip-path: polygon(-2px 0%, /*left top */
                    calc(100% - 39px) -1px, /** right top start fold 40px = 2 times border width substract a pixel for more fold effect.**/
                    100% 39px, /** right top end fold 40px = 2 times border width **/
                    100% 44px, /** right top move down 5px for box shadow offset down **/
                    calc(100% + 5px) 49px, /** right top move 5 right for clipping, add 5 to 44 for down offset to follow fold angle **/
                    calc(100% + 5px)  calc(100% + 5px), /** right bottom  **/
                    -1px calc(100% + 5px) /** left bottom  **/
                    );

.wrap {
   width: 100px;
   padding:10px;
   background-color: #eee;
   border: 1px solid #333;
}

.wrap img {
   box-shadow: 5px 5px 1px 0px gray;
   width: 100%;
   height: auto;
   margin: 0px;
}

.folded {
  position: relative;
  padding: 0px;
  margin: 0px;
  
  clip-path: polygon(0% 0%, /*left top */
                    calc(100% - 39px) -1px, /** right top start fold 40px = 2 times border width**/
                    100% 39px, /** right top end fold 40px = 2 times border width **/
                    100% 44px, /** right top move down 5px for box shadow offset down **/
                    calc(100% + 6px) 49px, /** right top move 6 right for clipping(shadow offset + spread), add 5 to 44 from top offset to follow fold angle **/
                    calc(100% + 6px)  calc(100% + 6px), /** right bottom   **/
                    0% calc(100% + 6px) /** left bottom  **/
                    );
}


.folded:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: orange;
  
  border-width: 20px;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
  
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 2px 3px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  
}

<div class="wrap">
    <div class="folded">
      <img src="https://cdn.sstatic.net/Img/april-fools-2019/so-tile.png?v=5922b5fd7715" >
    </div>
  </div>