html - 多边形右边界上的框阴影？

Question

我在向多边形的右边界添加框阴影时遇到问题，如下图所示:

我想在红线所在的位置添加阴影，如下图所示:

我通过这个使这个形状变得简单:

HTML:

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

CSS:

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

我没有使用 clip-path，因为它与 IE 不兼容，你必须做一些额外的设置才能让它在 Firefox 和其他一些浏览器上工作我想保持简单，所以我选择了简单的方法。但我面临的问题是仅使用 CSS 向右 Angular 添加阴影。有什么解决办法吗？或者我必须使用clip-path 才能在右 Angular 添加阴影？

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如果使用 -4deg 恢复为 0，则度数和内部图像相比

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