Rafique kj Rafique kj - 1 month ago 8
CSS Question

Box shadow on right border of polygon shape?

I am facing a problem in adding a box shadow to the right border of a polygon shape just like the image below:

enter image description here

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

enter image description here

and I made this shape simple by this:

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 used clip-path, since it is not compatible with IE and you have to do some extra settings to make it work on Firefox and some other browsers and I wanted to keep it simple so I went with the easy way. But the problem i am facing is to add shadow to the right corner only using CSS. Is there any solution for that? or I will have to use clip-path in order to add shadow to right corner?
enter image description here

Answer

If you can afford that the image is slightly rotated... (4 degrees)

.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>

otherwise...

if not, than you'll need an additional layer (<div>) of complexity, where the most outer div is the wrapper, the inner div has the shadow and is at 4deg degrees and than the inner image if restored to 0 using -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>

Comments