Kare ve Dikdörtgen
Kare çizmek oldukça basit sadece bir div oluşturup height ve width değerlerini eşit olarak vermek yeterli. Aynı şekilde dikdörtgen çiziminde ise height ve width değerlerinin farklı olması yeterli.
#kare {
width: 100px;
height: 100px;
background: gray;
}Daire
Daire oluşturmakta kare oluşturmak kadar kolay. Eğer CSS'i biraz biliyorsanız radius özelliği size yabancı gelmeyecektir. Şimdi width ve height özelliğine 100px verdiğimiz bir div oluşturduk. Bu div'in width ve height değerlerinin yarısı olan 50px değerini border-radius değerine vererek daireyi oluşturabiliriz.
Width ve height değerlerine ne verdiyseniz onun yarı değeri olacak şekilde border-radius değeri atamanız gerekir.
#daire {
width: 100px;
height: 100px;
background: gray;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}Üçgen
#ucgen {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 140px solid gray;
}Ay
CSS ile istediğiniz her şeyi çizebilme imkanınız var ancak büyük bir uğraş ve düşünme eylemi gerektirdiği kesin.
#ay {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 gray;
}
Aşağıdaki linkten CSS ile oluşturulan diğer şekilleri inceleyebilirsiniz.
Hiç yorum yok:
Yorum Gönder