CSS Şekil Çizme

CSS3 ile birlikte artık çeşitli şekilleri yapabiliyoruz. CSS ile çizilen çeşitli şekiller; css ile kalp çizme, css üçgen çizme gibi ilginç CSS kodlarını yazıda bulabilirsiniz.

Tüm örnekler HTML <div> etiketinde denenmiştir !

CSS kare oluşturma

div {
   width: 200px; 
   height: 200px; 
   background: blue; 
}

CSS yuvarlak yapma

div { 
   width: 200px;
   height: 200px;
   background: blue; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
   border-radius: 50%;
}

CSS oval yapma

div {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
   border-radius: 50%;
}

CSS üçgen çizme – yukarı

div {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

CSS üçgen çizme – aşağı

div {
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

CSS üçgen çizme – sola

div {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

CSS üçgen çizme – sağa

div {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

CSS yamuk çizmek 🙂

div {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

CSS elmas çizmek

div {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 50px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

CSS dikdörtgen çizmek

div {
   width: 200px; 
   height: 100px;
   background: blue;
}

CSS paralelkenar çizmek

div {
   width: 130px; 
   height: 75px;
   background: blue;
   margin: 20px;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

CSS oniki noktalı yıldız

div {
   height: 100px;
   width: 100px;
   background: blue;
   position: absolute;
   margin: 30px;
}
div:before {
   height: 100px;
   width: 100px;
   background: blue;
   content:"";
   position: absolute;
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
div:after {
   height: 100px;
   width: 100px;
   background: blue;
   content:"";
   position: absolute;
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

CSS altı noktalı yıldız

div {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid blue;
}
div:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid blue;
   margin: 30px 0 0 -50px;
}

CSS yorum alanı

div {
   width: 120px; 
   height: 80px; 
   background: blue;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
   margin: 30px;
}
div:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

CSS yumurta çizmek

div {
   width: 126px; 
   height: 180px;
   background-color: blue;
   -webkit-border-radius: 63px 63px 63px 63px/
   108px 108px 72px 72px;
   border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}

CSS pacman çizmek

div {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid blue;
  border-left: 60px solid blue;
  border-bottom: 60px solid blue;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

CSS tehlikeli alan uyarısı çizmek

div {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}

CSS ile kalp çizme

div { 
    position: relative;
}
div:before, div:after {
   position: absolute;
   content: "";
   left: 70px; top: 0;
   width: 70px;
   height: 115px;
   background: blue;
   -moz-border-radius: 50px 50px 0 0;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
div:after { 
    left: 0; 
   -webkit-transform: rotate(45deg); 
   -moz-transform: rotate(45deg); 
   -ms-transform: rotate(45deg); 
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   -o-transform-origin: 100% 100%;
   transform-origin :100% 100%;
}

CSS ying yang çizme

div {
   width: 96px;
   height: 48px;
   background: #eee;
   border-color: red;
   border-style: solid;
   border-width: 2px 2px 50px 2px;
   border-radius: 100%;
   position: relative;
}
div:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: #eee;
   border: 18px solid red;
   border-radius: 100%;
   width: 12px;
   height: 12px;
}
div:after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: red;
   border: 18px solid #eee;
   border-radius:100%;
   width: 12px;
   height: 12px;
}