CSS İle Geometrik Şekiller Yapmak

« Kareli ve Çizgili Defter Sayfası Örnekleri

Herkese merhabalar arkadaşlar bu yazımızda sizlere Css ile geometrik şekiller yapacağız.Umarız faydalı olur.

Css sayesinde sitelerimizin tasarımını yapabiliyoruz.Bu yazımızda ise sizlere üçgen,kare,dikdörtgen,daire gibi geometrik şekillerin css ile nasıl yapıldığının kodlarını paylaşacağız.Tüm geometrik şekillerin css-html kodları ve açıklamaları aşağıda verilmiştir.

Başlıklar

CSS İle Üçgen Yapımı

Html Kodları;

<div id="ucgen"></div>

1	<div id="ucgen"></div>

Css Kodları;

#ucgen{
 width: 0px;
 height: 0px;
 border-color: white white red white ; //Burada white yerine "transparent" kodu da kullanılabilir.Ek olarak renkleri istediğiniz gibi değiştirebilirsiniz.
 border-style: solid;
 border-width: 100px 100px 100px 100px; //Boyutlarıyla oynayarak dik üçgen,geniş üçgen veya değişik üçgenler yapabilirsiniz.
}

#ucgen{

width: 0px;

height: 0px;

border-color: white white red white ; //Burada white yerine "transparent" kodu da kullanılabilir.Ek olarak renkleri istediğiniz gibi değiştirebilirsiniz.

border-style: solid;

border-width: 100px 100px 100px 100px; //Boyutlarıyla oynayarak dik üçgen,geniş üçgen veya değişik üçgenler yapabilirsiniz.

}

Ekran Görüntüsü;

CSS İle Kare Yapımı

Html Kodları;

<div id="kare"></div>

1	<div id="kare"></div>

Css Kodları;

#kare{
width: 150px;
 height: 150px;
 background-color: red;
}

#kare{

width: 150px;

height: 150px;

background-color: red;

}

Ekran Görüntüsü;

CSS İle Dikdörtgen Yapımı

Html Kodları;

<div id="dikdortgen"></div>

1	<div id="dikdortgen"></div>

Css Kodları;

#dikdortgen{
 width: 250px;
 height: 150px;
 background-color: red;
}

#dikdortgen{

width: 250px;

height: 150px;

background-color: red;

}

Ekran Görüntüsü;

CSS İle Daire Yapımı

Html Kodları;

<div id="daire"></div>

1	<div id="daire"></div>

Css Kodları;

#daire{
width:150px;
height:150px;
background-color:red;
border-radius:100px; //Burada yuvarlak şeklini alması için border-radius kodunu ekledik.
}

#daire{

width:150px;

height:150px;

background-color:red;

border-radius:100px; //Burada yuvarlak şeklini alması için border-radius kodunu ekledik.

}

Ekran Görüntüsü;

CSS İle Elips Yapımı

Html Kodları;

<div id="elips"></div>

1	<div id="elips"></div>

Css Kodları;

#elips{
width:250px;
height:250px;
background-color:red;
border-radius:200px 100px 200px 100px; //Elips görüntüsü için border kısmını 4 px'e ayırdık.
}

#elips{

width:250px;

height:250px;

background-color:red;

border-radius:200px 100px 200px 100px; //Elips görüntüsü için border kısmını 4 px'e ayırdık.

}

Ekran Görüntüsü;

CSS İle Yamuk Yapımı

Html Kodları;

<div id="yamuk"></div>

1	<div id="yamuk"></div>

Css Kodları;

#yamuk{
width:200px;
height:200px;
border-top:50px solid white;
border-bottom:50px solid white;
border-left:200px solid red;
}

#yamuk{

width:200px;

height:200px;

border-top:50px solid white;

border-bottom:50px solid white;

border-left:200px solid red;

}

Ekran Görüntüsü;

Evet arkadaşlar geometrik şekillerin css ile yapılışı bu şekildedir.Umarız beğenirsiniz.Diğer derslerimizde görüşmek üzere.Herkese iyi çalışmalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?