Css ile Üçgenler Oluşturmak

Çalışmanızda görsel kullanmayı düşünmeden, bir kaç satır kodla ihtiyacınız olan geometrik şekilleri oluşturabilirsiniz. “Üçgen” de bu şekillerden birisi. Duyar duymaz aklınızda bir stil canlanmasa da tasarımınızdaki diğer şekil ve bileşenleri birleştirmekte faydalanılan şekiller üçgenler. Css ile üçgenleri oluşturmada kullanılan özellik border özelliğidir. Borderlar, kesişim yerleri 45 derecelik açıyla birleşen kenarlıklar olarak düşünebilir. Normal bir border oluşturduğumuzda şeklin ortasında boş bir alan kalır. Genişlik ve yüksekliği sıfırlayarak ortadaki boş alanı kaldırmış oluruz ve “border-width”i eşit ölçülere getirdiğimizde 4 eşit büyüklükte üçgene bölünmüş bir şekile sahip oluruz. Border-width değerleri değiştirilerek css ile simetrik olmayan üçgenler elde edebiliriz. Değerlerden, istediğimiz yönde olanı 0px olarak değiştirdiğimizde diğer ölçüler aynı olmak koşuluyla önceki şekline göre 2 yarım 1 tam üçgeni saran bir (yarım) border oluşmuş olur. Yukarı, aşağı, sağ veya sola doğru üçgenler oluşturmak istediğimizde, üçgenin işaret ettiği yönün tersi istikameti border-bottom dır, taban genişliği buradan ayarlanır. Tooltip yapılarında , açılan menülerin belirginliğini arttırma yöntemlerinde sıklıkla kullanımını görmüşsünüzdür. Örneklerle kullanım methodlarına bakalım. 

Uygulama:

 

See the Pen PqexKr by MinimalCoding (@MinimalCoding) on CodePen.

 

Dropdown Menü Açılır yapısında kullanım örneği

 

See the Pen jPxQaq by MinimalCoding (@MinimalCoding) on CodePen.