상자 그림자가있는 CSS 말풍선

상자 그림자가있는 CSS 말풍선

---

CSS를 사용하여 왼쪽에 삼각형을 그리는 DIV 만들기. 부모 및 의사 요소 (이미지 참조)와 코드 모두에 균일 한 상자 그림자를 적용하려고합니다.

이것이 가능한가? 아니면 이것을 위해 테두리 이미지를 사용하는 것이 더 낫습니까?

(위 : 그림자 전, 중간 : CSS 상자 그림자, 아래 : 원하는 결과)

.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;
    }

---

삼각형 해킹을 사용하는 대신을 사용하여 div를 회전 transform하고 실제 box-shadow. 당신은 단지 사업부 (눈에 보이는 삼각형 측)의 한면에 그림자를 원하기 때문에, 당신은 확인해야합니다 blur작은을하고 낮은 opacity.

데모 : 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;
}

산출:

---

다음은 전체 (S) CSS에서 코 크기 그림자 너비 및 선택적 테두리에 대한 변수 가있는 완전한 작업 예제 입니다.

트릭은 픽셀 완벽을 달성하기 위해 오프셋과 변형을 올바르게 가져오고 overflow:hidden필요에 따라 버블의 코를 자르는 데 사용 하는 것입니다 (특히 테두리가 필요한 경우).

위 답변의 예는 그림자가 잘려서 메인 버블 영역 위에 놓이기 때문에 우리에게 효과가 없습니다.

IE7 / 8에서 정상적으로 저하됩니다.

HTML :

<div class="chat">
    <div class="bubble">
        <span class='tail'>&nbsp;</span>
        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
    </div>
</div>

SCSS :

$shadow_radius = 6px;
$nose_size = 12px;
$shadow = 0 1px $shadow_radius #B2B2B2;
$border =  1px solid #bbb

.chat {
    font-family:      sans-serif;
    font-size:        small;
}

.bubble {
    background-color: #F2F2F2;
    border-radius:    5px;
    border:           $border;
    box-shadow:       $shadow;
    display:          inline-block;
    padding:          10px 18px;
    margin-left:     ($shadow_radius + $nose_size);
    margin-right:    ($shadow_radius + $nose_size);
    position:         relative;
    vertical-align:   top;
}

.tail {
    position: absolute;
    top:      $nose_size;
    left:   -($shadow_radius + $nose_size);
    height:  ($shadow_radius + $nose_size);
    width:   ($shadow_radius + $nose_size);
    overflow: hidden;
}
.tail:before {
    border:            $border;
    background-color:  #F2F2F2;
    box-shadow:        $shadow;
    content:           "\00a0";

    display:           block;
    position:          absolute;
    top:               0px;
    left:              $nose_size;
    height:            $nose_size;
    width:             $nose_size;
    -webkit-transform: skew( -45deg );
    -moz-transform:    skew( -45deg );
}

---

조금 까다 롭다는 것을 알고 있지만, 나에게는 좋은 것 같습니다. 여기 바이올린입니다 http://jsfiddle.net/dzfj6/

HTML

<div class="bubble">
    <div class="triangle"></div>
    <div class="border"></div>
    <div class="content">some content</div>
</div>

CSS

.bubble
{
    height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;
}

.triangle
{
   position:absolute;
   top:12px;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid #f2f2f2;
   margin-left:-9px;
   z-index:3;
}
.border
{        
   position:absolute;
   top:12px;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid #e0e0e0;
   margin-left:-10px;
   z-index:2;
}

.content{
   padding:10px;
}

대신 box-shadow간단히 borderbuble을 사용할 수 있습니다 .

---

또 다른 해결책은 filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));개체 모양 주위에 그림자 만 배치하는 것입니다.

---

사용하지 마십시오 box-shadow.

 height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;

참조 URL : https://stackoverflow.com/questions/8866736/css-speech-bubble-with-box-shadow