CSS ile üçgen ok yapmak

Web tasarımındaki üçgenler, genellikle işaretçiler, oklar veya yalnızca web sayfalarının öğeleri olarak kullanılır. Üçgenleri oluşturmak için genellikle Border kullanılır.

Sitelerde, üçgenler her zaman elemanların tasarımının bir parçası olarak kullanılır, örneğin, bir nesneye işaretçi olarak hizmet ederler ve okuyucunun dikkatini doğru yere yönlendirirler. Üçgenler aynı zamanda dekoratif işlevleri yerine getirerek blokların uygulandıkları yerleri daha şık ve modern hale getirir.

Önce sıfır boyutta bir blok yapılır, daha sonra boyutu bu üçgenin boyutuna denk gelen bu bloğa border eklenir. Son olarak, kullanılmayan taraflardaki sınırları şeffaf hale getiriyoruz, sonuç olarak renkli bir üçgen oluşmuş.

İlk başta farklı üçgenler yapmayı kolaylaştırmak için jeneratörleri kullanabilirsiniz. İşte bunlardan bazıları.

http://apps.eky.hk/css-triangle-generator/

http://triangle.designyourcode.io/

Border Kullanma


Border özelliği ile oluşturulan sınırlar doğrudan üçgenlerle ilgili olmasa da, bunun için en sık kullanılan özellikdir. Elemanın genişliğini ve yüksekliğini sıfıra ayarlarsanız ve ayrıca oldukça kalın bir border ayarlarsanız, dört üçgenden oluşan bir set göreceğiz. Net olarak bu üçgenleri algılamak için, her taraftaki border farklı renkler verilir.

CSS ile üçgen elde etmenin değişik yolları vardır.

HTML:


<div class="ok"></div>	

CSS:


.ok {
    width:0;
    height:0;
    border-style:solid;
    border-width:50px;
    border-color: red green blue orange;
   }

Sadece istenen kenarlığı bırakarak ve geri kalanını şeffaf hale getirerek, istenen renkteki bir üçgeni elde ederiz.


.ok {
    width:0;
    height:0;
    border-style:solid;
    border-width:50px;
    border-color:transparent transparent blue transparent;;
   }	

ÇIKTI:

Şimdide bir dikdörtgen yöntemi ile üçgen oluşturmak için üst kenarlığı kaldırıyoruz. İşte yeni kod:


.ucgen {
width: 0px;
height: 0px;
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 100px 100px 100px;
}

ÇIKTI:


.up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid green;
 }

ÇIKTI:

Border değerlerini büyüterek daha büyük üçgenler oluşturabilirsiniz.


.up1 {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid green;
 }

ÇIKTI:

Yukarı Üçgen Ok



.up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid green;
}

ÇIKTI:

Aşağı Üçgen Ok



.down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid green;
}

ÇIKTI:

Sağa Üçgen Ok



.right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #green;
	border-bottom: 25px solid transparent;
}

ÇIKTI:

Sola Üçgen Ok



.left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid green;
	border-bottom: 25px solid transparent;
}

ÇIKTI:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

8262

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.