Css ile resim kullanmadan kurdele yapımı – Corner Ribbon with pure css

Genelde e-ticaret sitelerinde ürünlerin gösterildiği sayfada, ürünlerle ilgili indirim, yeni bir ürün olduğu, özel bir ürün olduöu, birkaç adet kaldığı veya kampanyalı olup olmadığı ile ilgili bilgileri öne çıkarmak için kurdele üzerinde tasarımı kullanılır.

Kurdele tasarımını sayfamızda kullanmak için belki birçok yol vardır. Örneğin resimler kullanarak arka fonda göstermek gibi.

Fakat bu yazımda resim yerine bu işlemi sadece html ve css ile nasıl kullanabileceğimizi göstermeye çalışacağım.

Daha doğrusu kodları paylaşacağım.

Öncelikle kurdele yapısını oluşturmak için HTML kodlarımızı sayfamıza eklememiz gerekiyor. HTML kodlarımız aşağıdaki gibi olacak:

<div class="urun">
    <img src="http://www.placehold.it/280x170" alt="www.anarsamadov.net">
    <div class="kurdele-alani">
        <div class="kurdele">%5 İndirim</div>
    </div>
</div>

HTML kodlarımızda dikkat ederseniz 3 farklı div kullandık. İlk div ürünümüzü göstermek için , ikincisi kurdele için, üçüncüsü kurdele üzerine yazılacak metin için kullanılmıştır. İlk div içerisinde ürün fotoğrafı niyetine bir fotoğraf kullandık.

Şimdi gelelim bu kodları görselleştirme kısmına. Bunun için de aşağıdaki CSS kodlarımızı css dökümanızıma eklememiz gerekecektir:

.urun {
    margin: 50px auto;
    width: 280px;
    height: 170px;
    background: #DDD;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 90;
}
.kurdele-alani {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
}
.kurdele {
    font: bold 13px Sans-Serif;
    color: #000;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.kurdele:before, .kurdele:after {
    content:"";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
}
.kurdele:before {
    left: 0;
}
.kurdele:after {
    right: 0;
}

CSS ile kurdele yapımı

işte bu kadar. CSS kodlarında değişiklikler yaparak kurdele rengini, boyutunu ve s. değişterbilirsiniz.
Örnek uygulamayı buradan indirebilirsiniz.

Uygulamayı buradan önizleme yapabilir veya aşağıdaki bölümden inceleyebilirsiniz: