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 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 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-radius
ona bir ekleyerek oluşturulabilir .
<div class="circle"></div>
.circle {
width: 200px;
height: 200px;
background: #3e92cc;
border-radius: 50%;
}
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%;
}