A box shadow on the right border of a polygon shape?

Question

I had a problem adding a window shadow to the right border of the polygon shape, as shown in the image below:

and I want to add a shadow, where is the red line, as you can see in the image below:

and I made this form simple:

HTML:

<div class="shape">
   ....          
</div>

CSS

.shape {
   background: url(img/1.jpg);
   border-top: 400px solid transparent;
   border-right: 40px solid #ffffff;
}

I did not use the clip path, since it is incompatible with IE, and you need to make some additional settings to make it work with Firefox and some other browsers, and I wanted to keep it simple, so I went with the easy way, But the problem is, which I came across is to add a shadow to the right corner using only CSS. Is there a solution for this? or will I have to use a clip path to add a shadow to the right corner?

Answer 1

, ... (4 )

.rightDiagonal{
  display:inline-block;
  overflow:hidden;
  padding-right:35px;
}

.rightDiagonal img{
  -webkit-backface-visibility: hidden;
  transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  
  margin:-15px;
  box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}

<div class="rightDiagonal">
<img src="http://placehold.it/100x180/0ba">  
</div>

...

, (<div>) , div , div 4deg, if 0 -4deg

.rightDiagonal{
  display:inline-block;
  overflow:hidden;
  padding-right:15px;
}
.rightDiagonal div {
  display:inline-block;
  overflow:hidden;
  margin: -15px 0 -15px -15px;
  -webkit-backface-visibility: hidden;
  transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
.rightDiagonal img{
  margin-right: -15px;
  transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
}

<div class="rightDiagonal">
  <div><img src="http://placehold.it/100x180/0ba"></div>
</div>


<div class="rightDiagonal">
  <div><img src="http://placehold.it/170x200/a0b"></div>
</div>

Answer 2

CSS:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    background: url(img/1.jpg);
    border-top: 400px solid transparent;
    border-right: 40px solid #ffffff;
    }