Hüseyin MERT

Sadece teknoloji değil…

HTML5 ve CSS3 ile kalp yapmak

buzzla tweetle CSS3, HTML521 Mayıs 2010 0

Merak ettiğim için böyle bir şey deneyeyim dedim. İki tane divin iki komşu kenarını oval yapıp birbiri üstüne 45 derece ile oturtup bir de ortalarsanız kalp elde ediyorsunuz.

Örnek

<div id="kalp">
  <div class="sol"></div>
  <div class="sag"></div>
</div>
#kalp {width: 200px;height: 200px;position: relative;overflow: hidden;}
#kalp div{
display: block;position: absolute;width: 100px;height: 160px;background-color: #c50011;bottom: 22px;
-moz-border-radius-topleft: 100px;-moz-border-radius-topright: 100px;
-webkit-border-top-left-radius: 100px;-webkit-border-top-right-radius: 100px;
border-top-left-radius: 100px;border-top-right-radius: 100px;}
#kalp .sol {-o-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);
  -webkit-border-bottom-right-radius: 100px;-webkit-border-bottom-left-radius: 0;
  moz-border-radius-bottomright: 100px;-moz-border-radius-bottomleft: 0;
  border-bottom-right-radius: 100px;border-bottom-left-radius: 0;
left: 28px;
}
#kalp .sag {-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);
  -webkit-border-bottom-right-radius: 0;-webkit-border-bottom-left-radius: 100px;
  -moz-border-radius-bottomright: 0;-moz-border-radius-bottomleft: 100px;
  border-bottom-right-radius: 0;border-bottom-left-radius: 100px;
left: 71px;
}

yüreğime sağlık (: