Bu yazımızda Css ile üçgen yapımı nasıl oluyor onu öğreneceğiz. Bu tarz yapacağımız üçgen ok şeklini tasarımlarımızın birçok yerinde kullanabiliyoruz. Birgün sizin de ihtiyacınız olabilir diye paylaşmak istedim. Şimdi neler yapacağız bir bakalım.
Yazacağımız kodlara baktığınızda aslında şunları yapıyoruz.
⇒ Bir <div> etiketi tanımlayıp bunun genişlik ve yükseklik değerine 0px veriyoruz. Daha sonra;
► Eğer üçgenin yönü yukarı olacaksa tam tersi yönünde yani border-bottom değerine dilediğimiz bir renk verip border-left ve border-right değerlerini transparent yapıyoruz.
► Eğer üçgenin yönü sağa olacaksa tam tersi yönünde yani border-left değerine dilediğimiz bir renk verip border-top ve border-bottom değerlerini transparent yapıyoruz.
► Eğer üçgenin yönü aşağı olacaksa tam tersi yönünde yani border-top değerine dilediğimiz bir renk verip border-left ve border-right değerlerini transparent yapıyoruz.
► Eğer üçgenin yönü sola olacaksa tam tersi yönünde yani border-right değerine dilediğimiz bir renk verip border-top ve border-bottom değerlerini transparent yapıyoruz.
Vereceğimiz border-width değeri ise üçgenin boyutunu belirleyecektir. Bu değeri değiştirerek dilediğiniz boyutta üçgenler oluşturabilirsiniz.
Html Kodları
|
1 2 3 4 5 6 |
<div class="triangle top"></div> <div class="triangle right"></div> <div class="triangle bottom"></div> <div class="triangle left"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.triangle{ width:0px; height:0px; } .top{ border-bottom:30px solid cornflowerblue; border-left:30px solid transparent; border-right:30px solid transparent; } .right{ border-left:30px solid cornflowerblue; border-top:30px solid transparent; border-bottom:30px solid transparent; } .bottom{ border-top:30px solid cornflowerblue; border-left:30px solid transparent; border-right:30px solid transparent; } .left{ border-right:30px solid cornflowerblue; border-top:30px solid transparent; border-bottom:30px solid transparent; } |
Görünümü
Css ile üçgen yapımı bu şekilde.
Umarım sizin için yararlı bir yazı olmuştur.
Html ve Css ile ilgili eksikleriniz olduğunu düşünüyorsanız, Html ve Css Dersleri ile ilgili yazmış olduğum yazı serilerini inceleyebilirsiniz.
Şu yazılarda ilginizi çekebilir.
Html ve Css ile Dikey Çizgi Nasıl Yapılır?
Html ve Css ile Animasyonlu Arama Kutusu Yapımı
Yeni bir yazımda görüşmek üzere.
