CSS фоновое изображения и IMG тег позиционирование

Question

я хочу сделать, как этот границы в каждом Ли и цвете фона

если есть предложение для продукта изображения с предложением значения должно прийти еще нет предложения, от которого изображение треугольника не должно отображаться.

this is i want

Как это у меня есть 4 колонки правому краю и ширину - я wantr дать в ет и%. КАК кто-нибудь расскажет, как? HTML:

<li class="home-latest-cakes" id="product-42"> 
       <a href="http://localhost:8083/vignesh/works/cakes/?product=sample-2"> 
              <div class="product-bg">       




        <img width="124" height="238" alt="product-1" class="attachment-post-thumbnail wp-post-image" src="http://localhost:8083/vignesh/works/cakes/wp-content/uploads/2014/02/product-1.png">            </div> 
       </a>      
      </li> 

CSS:

.home-latest-cakes { 
    border: 1px solid #EEEEEE; 
    color: #E4E4E4; 
    float: left; 
    height: 465px; 
    margin-right: 1.6em; 
     width: 200px; 
} 
.product-bg { 
    background-color: #F8F9F4; 
    height: auto; 
    margin: 10px; 
    text-align: center; 
} 
.offer { 
    background: url("images/offer-bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    float: right; 
    font-family: Impact; 
    font-size: 30px; 
    height: 92px; 
    min-width: 94px; 
    z-index: 999; 
} 
.percent { 
    color: #FFF000; 
    float: right; 
    font: 30px "Impact"; 
} 
ins.off { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
    color: #FFFFFF; 
    font-family: "Bebas"; 
    font-size: 20px; 
    left: 60px; 
    position: relative; 
    top: 31px; } 

Answer 1

Этот треугольник должен быть отдельный образ, вы можете поместить его с position:absolute;. Это связано с тем, что вы не можете определять условия с чистым html и делать это с помощью JQuery или javascript.