CSS İle Ok Çizmek

Her resim sunucuya bir HTTP isteği gönderir. Ve bu istekleri sitemizin açılış süresini etkiler. Yani ne kadar az HTTP isteği olursa sitemiz o kadar hızlı açılır. Bu konuda işimize yarayabilecek ufak bir uygulamayla başlamak istiyorum. CSS ile konuşma baloncuğu oku çizmek.

div.arrowBox {
  width:500px;
  height:200px;
  background-color:#eee;
  margin:50px auto;
  position:relative;
}

div.arrowBox span {
  position:absolute;
  bottom:-30px;
  left:10px;
  border-top:30px solid #eee;
  border-left:10px solid #fff;
  border-right:30px solid #fff;
  }

p {
  padding:20px;
  color:#09F;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size:12px;
}

Ben kodlamayı yaparken İngilizce isimler kullanmaya özen gösteriyorum. Çünkü kendimi Türkçe isimlere alıştırırsam bu sefer el alışkanlığıyla Türkçe karakter kullanabilirim. Böyle iyi.

Yukarıda “arrowBox” sınıfına ait bir kutu oluşturdum.

<div class="arrowBox">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque interdum lacus quis posuere. Nulla dolor leo, accumsan et... </p>
  <span></span>
</div>

Bu kutunun içine de okumuz olan “span” elementini “position” özelliğiyle yerleştirdim.

İşin kilit noktası “border“da. Örnekte yukarıdan 30px’lik gri renkli bir border geliyor. Onu sağdan 10px, soldan ise 30px’lik beyaz renkli birer border sıkıştırıyor. Eğer arkaplan renginiz de beyaz ise gri renkli bir ok oluşmuş gibi görünür.

Örnek