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: