Html ve Css ile Üçgen Yapımı

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ı

Css Kodları

Görünümü

css-ile-ucgen-yapimi 

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?

Css ile Toggle Switch Yapımı 

Css ile Tooltip Yapımı

Html ve Css ile Animasyonlu Arama Kutusu Yapımı

Yeni bir yazımda görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +