多边形形状的右边框如何添加阴影？

Question

多边形形状的右边框如何添加阴影？

htmlcss

4

我在给多边形的右边框添加盒子阴影时遇到了问题，就像下面的图片一样：

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

我通过以下方式使这个形状简单：

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在右下角添加阴影。有没有解决方案？或者我必须使用clip-path才能在右下角添加阴影？

- Rafique kj

兼容IE...你想支持多少个IE版本？ - Roko C. Buljan

IE9、10和11 @RokoC.Buljan - Rafique kj

主要问题在于您使用的是 jpg 格式，该格式不支持透明度。因此，如果您尝试使用 JPEG 格式渲染具有透明度的图像，则您认为是透明的白色空间实际上只是填充了白色。如果您在 PNG 格式上重新渲染图像并使用 drop-shadow 滤镜，则应该可以获得所需的效果。 - CristianHG

是的，但图片是jpeg格式的，如果是关于png格式的话，我为什么不简单地在多边形形状中裁剪图片并添加简单的盒子阴影呢？但我想通过适当的CSS处理它，以便如果图片是正方形，则应显示为多边形。@CristianHG - Rafique kj

2个回答

-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;
    }

- Nikola Ivanović

你能否展示一个适用于这个“解决方案”的代码片段？ - Roko C. Buljan

@Nikola，这在他的情况下不会正常工作，因为您正在使用box-shadow，它（根据其名称推断）具有一个_box_形状，而不是他想要的自定义倾斜形状。 - CristianHG

准确的 @CristianHG - Rafique kj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

如果您可以接受图片稍微旋转一点（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>