图像（< img>标签）上的CSS截断角，不带div [英] CSS cut-off corners on image (<img> tag) without div

问题描述

我试图为页面中每个图片的截止右下角获取一个仅限CSS的解决方案。

I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page.

到目前为止，用这个：

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

但文档不会出现在任何地方。 （我使用Chrome检查器）。

But the doesn't appear in the document anywhere. (I'm using the Chrome inspector).

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

I hope someone can point me in the right direction. Thanks in advance!

推荐答案

示例

Example

不能使用 :: after img 。

与输入是因为他们是自我关闭的（ /> ），并且没有内容。

Same with inputs, this is because they are self closing (/>) and hold no content.

像这样：

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

，然后使用

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

在我的示例中，我使用：

In my example I used:

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

这篇关于图像（< img>标签）上的CSS截断角，不带div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！