CSS cut-off corners on image (

问题:

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

So far, I have come up with this:

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

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!

回答1:

Example

You can not use ::after with img.

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

What you could do is something like this:

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

and then use

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

回答2:

img is an inline element and :before or :after won't work , you'll have to wrap the img with a div

this is probably what you need: http://jsfiddle.net/h7Xb5/1/

this is the 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;
}