没有div的图像(<img>标签)上的CSS截止角

Question

我正试图在页面中的每个图像上获得一个仅限CSS的解决方案,用于切断右下角.

到目前为止,我已经想出了这个:

img::after {
    content: url(/images/whitecorner.png);
    height: 20px;
    width: 20px;
    display: inline-block;
    float: right;
}

但是文档中没有出现任何地方.(我正在使用Chrome检查器).

我希望有人能指出我正确的方向.提前致谢!

Answer 1

例

您不能使用::after与img.

与inputs 相同,这是因为它们是自闭(/>)并且不保留任何内容.

你能做的是这样的:

<div class='cut-image'>
  <img src='http://placehold.it/250'/>
</div>

然后使用

.cut-image::after{
  /*styles*/
}

在我的例子中我用过:

HTML:

<div class='cut-image'>
    <img src='http://placehold.it/250'/>
</div>

<div class='cut-image'>
    <img src='http://placehold.it/250'/>
</div>

CSS:

.cut-image{
    position:relative;
    float:left;    
    margin:0 5px;
    overflow:hidden;
}

.cut-image::after {
    content: '';
    position:absolute;
    bottom:0;
    right:0;
    height: 0px;
    width: 0px;
    border-left:40px solid transparent;
    border-top:40px solid transparent;
    border-bottom:40px solid white;
    border-right:40px solid white;
}