Comment redimensionner une image dans un pseudo-élément?

Question

J'essaie de faire quelques trucs avec pseudo-élément.

Je montre un classement et je veux qu'une couronne apparaisse au-dessus du gagnant, inclinée de 45 degrés dans le coin de la boîte où l'image sera. Mais l'image est trop grande, y a-t-il un moyen de redimensionner une image qui est ajoutée sur un pseudo-élément?

je ne dispose que ce div:

<div class='box'></div> 

Avec cette CSS:

.box { 
    width: 50px; 
    height: 50px; 
    float: left; 
    border: 1px solid #000; 
    position:absolute; 
    top: 100px; 
    left: 100px; 
} 

.box::after{ 
    content: url(URL_OF_IMAGE); 
    position: absolute; 
    top: -10px;  
    right: -10px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
} 

J'ai fait un exemple sur jsFiddle: http://jsfiddle.net/GEtds/

J'ai essayé de modifier height et width mais sans effet .

Answer 1

Puisque vous utilisez déjà des transformations, aller plus loin. Utilisez-les pour déplacer et redimensionner l'image:

.box::after{ 
    content: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png); 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    width: 0.1em; 
    height: 0.1em; 
    -webkit-transform: translateY(-35px) rotate(45deg) scale(0.2); 
    -moz-transform: translateY(-35px) rotate(45deg) scale(0.2); 
} 

updated fiddle

Answer 2

Vous pouvez le faire en définissant l'image background-image, en combinaison avec background-size: cover; cela vous permettra de contrôler la taille de l'image en réglant le width et height sur le pseudo-élément. Vous devrez également ajouter content: ""; pour vous assurer que le pseudo-élément est rendu.

Voici un jsFiddle

CSS

.box::after { 
    display: block; 
    content: ""; 
    background-image: url(http://www.clker.com/cliparts/9/5/e/b/12428065451316964828Simple_crown_icon.svg.med.png); 
    background-size: cover; 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    width: 40px; 
    height: 40px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
}