html – 多边形右边框上的框阴影？

概述我在向多边形的右边框添加框阴影时遇到问题,如下图所示： 我想在下面的图片中看到红线所在的阴影处添加阴影： 我这样做的形状很简单： HTML： <div class="shape"> .... </div> CSS： .shape { background: url(img/1.jpg); border-top: 400px solid transparent; 我在向多边形的右边框添加框阴影时遇到问题,如下图所示：

我想在下面的图片中看到红线所在的阴影处添加阴影：

我这样做的形状很简单：

HTML：

<div >   ....          </div>

CSS：

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

我没有使用剪辑路径,因为它与IE不兼容,你必须做一些额外的设置才能使它在firefox和其他一些浏览器上工作,我想保持简单,所以我采用了简单的方法.但我面临的问题是只使用CSS在右上角添加阴影.那有什么解决方案吗？或者我将不得不使用剪辑路径以向右角添加阴影？

解决方法 如果你能承受到图像稍微旋转……(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,1);}

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

除此以外…

如果没有,那么你需要一个复杂的附加层(< div>),其中最外层的div是包装器,内部div具有阴影并且与内部图像相比,如果使用0还原为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,1);}.rightDiagonal img{  margin-right: -15px;  transform: rotate(-4deg);  -webkit-transform: rotate(-4deg);  -ms-transform: rotate(-4deg);}

<div >  <div><img src="http://placehold.it/100x180/0ba"></div></div><div >  <div><img src="http://placehold.it/170x200/a0b"></div></div>

总结

以上是内存溢出为你收集整理的html – 多边形右边框上的框阴影？全部内容，希望文章能够帮你解决html – 多边形右边框上的框阴影？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。