CSS Dersleri ile ilgili içeriklerimize ara vermeden devam ediyoruz ve bugün gerçekten farklı bir konuyu işliyor olacağız. Bilirsiniz, bazı sitelerde kâğıt gibi kıvrılmış kenarlıklar vardır. Bu daha farklı bir görünüm elde edebilmemizi sağlar tasarımımızda. Gerek sitenizin Header bölümünde, gerek Image'lerinizde kullanabileceğiniz gibi, ana bölüme ait div içerisinde de kullanabilirsiniz. CSS ile kıvrılmış kenar efekti yapımını, şimdi sizlerle paylaşıyor olacağız. Faydalı olmasını diliyoruz...

AYRICA: CSS ile İki Renkli Kenarlık Yapımı

CSS ile Kıvrılmış Kenar Efekti Yapımı

1) Öncelikle ana div içerisine aşağıdaki kodu ekleyelim.

.anadiv {
position:relative;
}

2) Sonra ise "after" sınıfını kullanarak, efekti ekleyelim.

.anadiv:after{
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #eee;
border-left: 70px solid #444444;
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}


Örnek Görünüm