CSS konu olunca genellikle bazı web tasarım öğeleri için kullanılırlar. Ama bazı insanlar onlarla sanat yapmayı bile seviyor!

CSS ile yapabileceğiniz bazı şekillerin temelleriyle başlamış olacağız. Bu seri boyunca, bazı daha gelişmiş şekillere ve bunları nasıl yapabileceğimize bakacağız.

CSS ile Kareler

Tüm şekillerin şekli ile başlayalım. Kare, birçok başka şekil için kullanılır.

Eşit genişliğe / yüksekliğe sahip bir öğeye sahip olmak kadar basit.

 

<div class="square"></div>

 

.square {
  width: 200px;
  height: 200px;
  background: #3e92cc;
}

Bu, temel bir kare ile sonuçlanacaktır:

CSS'de Bir Kare

CSS ile dikdörtgenler

Kareden genişliği veya yüksekliği ayarlayarak dikdörtgen yapabiliriz. Bunlardan birini büyütmek bize bir dikdörtgen verecektir.

 

<div class="rectangle"></div>

 

.rectangle {
  width: 300px;
  height: 200px;
  background: #3e92cc;
}

CSS'de dikdörtgen şekil

CSS içeren çevreler

Şimdi favorilerimden biri için bir daire. Avatarlar veya düğmeler için kullanılacak çok yönlü bir öğedir.

Kareyi kullanarak ancak border-radiusona bir ekleyerek oluşturulabilir .

 

<div class="circle"></div>

 

.circle {
  width: 200px;
  height: 200px;
  background: #3e92cc;
  border-radius: 50%;
}

CSS'de Çevreler

CSS ile ovaller

Aynı şekilde, oval şekiller yapmak için dikdörtgenimize bir kenarlık-yarıçap ekleyebiliriz.

 

<div class="oval"></div>

 

.oval {
  width: 300px;
  height: 200px;
  background: #3e92cc;
  border-radius: 50%;
}

CSS'de ovaller