Press "Enter" to skip to content

CSS ile Balon Yapımı (SCSS)

Samet Ocak 0

Merhaba arkadaşlar

bugün sizlere akşamdan kalan kafasını muzdarib olduğu bir vukuat ile karşınıza çıkıyorum, malumunuz üzere bazen insanlar çok büyük okyanusları geçerde ufacık göllerde boğulabilirler. Bu nazaran bende ufacık gölde boğulur gibi oldum fakat sonra düşündüm ki asl olan gölde boğulmak değil, göle ne zaman ve hangi kafayla girdiğindir.

Hülâsâ, sizlere bu gün css ile balon nasıl yapılır onu göstericem. Css kodumuzu aşağı yazıyorum, yani ben scss yazıcam siz kaffanıza göre css olarak dökebilirsiniz.

.balon { position: relative; background: #00aabb; border-radius: .4em; } //Burada balon için div oluşturduk özellikleri verdik
.balon:after { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0; border: 55px solid transparent; border-bottom-color: #00aabb; border-top: 0; border-right: 0; margin-left: -27.5px; margin-top: -55px; }
// bu kısımda ise after özniteliğimiz ile balonun üzerindeki balonu balon yapan o küçük tic işareti

Buda HTML


<div class="balon"></div>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir