图像(标签)上的 CSS 截断角，<img>不带 div

Question

我正在尝试为页面中每个图像的右下角截断提供仅css的解决方案。

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

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

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

我希望有人能给我指个正确的方向。提前感谢!

Answer 1

示例

::after和img不能同时使用

与input s相同，这是因为它们是自闭的(/>)，不含任何内容。

你可以这样做:

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

Answer 2

img是一个内联元素，:before或:after不起作用，你必须用div

包装img

这可能是你需要的:http://jsfiddle.net/h7Xb5/1/

这是css:

div {
    width:300px;
    height:300px
}
div:hover:before {
    content:"";
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    background:url(http://www.linobanfi.it/immagini/lino_banfi_3.jpg) no-repeat center center;
}