Question

我正在尝试为页面中的每个图像上的右下角切割获得仅限CSS的解决方案。

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

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

但是文档中没有出现任何内容。（我正在使用Chrome检查器）。

我希望有人能指出我正确的方向。提前谢谢！

Answer 1

<强> Example

您无法将::after与img一起使用。

与input相同，这是因为它们是自动关闭（/>）并且没有内容。

你能做的是这样的事情：

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

没有div的图像（<img/>标签）上的CSS截止角

2 个答案: