CSS Kutuya Gölge ile Konuşma Balonu

SORU

15 Ocak 2012, Pazar

CSS Kutuya Gölge ile Konuşma Balonu

Kullanan bir DİV oluşturma solunda bir üçgen çizmek için CSS. Her iki ebeveyn için box-shadow üniforma uygulamak için çalışıyor ve sözde eleman (bkz: resim) ve kod.

Bu mümkün mü? Ya da sınır-görüntü kullanarak bu daha iyi miyim?

(Üst: Gölge, Orta Önce: CSS Box-Shadow, Alt: İstenen Sonucu)

Elements Before Box-Shadow is added

Elements with box-shadow added

The desired result

.bubble{
    height: 200px;
    width:  275px;

    opacity: 0;

    margin-top: 41px;

    float: right;

    background-color: #F2F2F2;

    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 6px #B2B2B2;
}

.bubble::after {
        height: 0px;
        width:  0px;

        content: "\00a0";

        display: block;

        margin-left: -10px;
        margin-top:   28px;

        border-width: 10px 10px 10px 0;
        border-style: solid;
        border-color: transparent #F2F2F2 transparent transparent;

        -webkit-box-shadow: 0px 0px 6px #B2B2B2;
    }

CEVAP

15 Ocak 2012, Pazar

Bir üçgen kesmek yerine, sadece bir div transform kullanarak döndürme ve box-shadow gerçek alabilirsiniz. Sadece dıv (görünür Üçgen tarafı) bir tarafı gölge istediğim için, opacity blur daha küçük ve daha düşük yapmak zorunda.

Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/

HTML:

<div class="bubble"></div>

CSS:

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0px 0px 6px #B2B2B2;
    height: 200px;
    margin: 20px;
    width:  275px;
}

.bubble::after {
    background-color: #F2F2F2;
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    content: "\00a0";
    display: block;
    height: 20px;
    left: -10px;
    position: relative;
    top: 20px;
    transform:             rotate( 45deg );
        -moz-transform:    rotate( 45deg );
        -ms-transform:     rotate( 45deg );
        -o-transform:      rotate( 45deg );
        -webkit-transform: rotate( 45deg );
    width:  20px;
}

Çıkış:

enter image description here