Верхние левые и нижние правые ленты

Question

Я пытаюсь получить ленту png в левом верхнем углу и в правом нижнем углу окна (см. Рисунок ниже), но не увенчался успехом.

Эта коробка имеет цвет фона, и в ней будет текст, поэтому ленты должны сохранять свое положение всякий раз, когда коробка растягивается. Кажется, так легко сделать так, что кто-то может мне помочь.

Answer 1

Используйте абсолютное позиционирование, чтобы поставить два div s с top:0;left:0; и bottom:0;right:0;. Как это в CSS:

#box{ 
    position:relative; 
    /* your styles... */ 
} 
#box:before,#box:after{ 
    content:''; 
    position:absolute; 
    width:100px;height:50px; 
} 
#box:before{ 
    top:0;left:0; 
    background:#0f0; /* you could put some kind of image here */ 
} 
#box:after{ 
    bottom:0;right:0; 
    background:#0f0; /* you could put some kind of image here */ 
} 

Смотрите эту JSFiddle для рабочей демонстрации.

Answer 2

Попробуйте использовать позицию: фиксированный; через CSS

Answer 3

Вы можете использовать абсолютное позиционирование. Было бы что-то вроде этого:

http://jsfiddle.net/myajouri/389hQ/

.green-box { 
    position: relative; 
    /* other styles */ 
} 

.green-box:before, 
.green-box:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 100px; /* ...or whatever */ 
    height: 50px; /* ...or whatever */ 
} 

.green-box:before { 
    top: 0; 
    left: 0; 
    background-image: url("wherever the ribbon image is") left top no-repeat; 
} 

.green-box:after { 
    bottom: 0; 
    right: 0; 
    background-image: url("wherever the ribbon image is") right bottom no-repeat; 
} 

Это должно работать в IE8 и выше + современных браузеров. Если вам неинтересно IE8, вы можете использовать CSS-преобразования для поворота одного и того же изображения вместо двух разных изображений.