CSS语音泡沫与框阴影 [英] CSS Speech Bubble with Box Shadow

问题描述

创建使用CSS在左侧绘制三角形的DIV。尝试对父元素和伪元素（请参阅图片）和代码应用统一的盒子阴影。

Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code.

这是可能吗？

（顶部：Shadow，Middle：CSS Box-Shadow，Bottom：Desired Result）

(Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: 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;
    }

推荐答案

，你可以使用 transform 旋转一个div，得到一个真实的 box-shadow 。因为你只需要阴影在div的一侧（可见的三角形边），你必须使 blur 更小，降低 opacity 。

Instead of using a triangle hack, you can just rotate a div using transform and get a real box-shadow. Since you only want the shadow on one side of the div (the visible triangle side), you have to make the blur smaller and lower the 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;
}

输出：

这篇关于CSS语音泡沫与框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！