Как изменить размер изображения в псевдоэлементе?

Question

Я пытаюсь сделать некоторые трюки с псевдоэлементом.

Я показываю рейтинг, и я хочу, чтобы корона показывалась сверху победителя, наклонена на 45 градусов в углу окна, где будет изображение. Но изображение слишком велико, есть ли способ изменить размер изображения, добавляемого на псевдоэлемент?

У меня есть только это div:

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

С этим 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); 
} 

Я сделал пример на JSFiddle: http://jsfiddle.net/GEtds/

Я попытался изменения height и width, но никакого эффекта ,

Answer 1

Поскольку вы уже используете преобразования, пойти на шаг дальше. Используйте их, чтобы перемещать и масштабировать изображение:

.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

Вы можете сделать это, установив изображение background-image, в сочетании с background-size: cover; это позволит вам контролировать размер изображения, установив width и height на псевдо-элемента. Вам нужно будет добавить content: "";, чтобы обеспечить визуализацию псевдоэлемента.

Вот 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); 
}