边框周围的气泡+箭头（三角形）在css

Question

我似乎无法在我的箭头周围找到边框。我一直在关注this source，但我似乎无法让我的工作。所以我做了一个fiddle here来向你展示我在做什么。

<div class="share-bubble">0</div> 

.share-bubble{ 
    background-color: white; 
    border-radius: 5px; 
    box-shadow: 0 0 2px #B2B2B2; 
    display: inline-block; 
    padding: 6px 10px; 
    position: relative; 
    vertical-align: top; 
    border: 1px solid #CCC; 
} 
.share-bubble::before { 
    background-color: white; 
    content: "\00a0"; 
    display: block; 
    height: 8px; 
    position: absolute; 
    top: 11px; 
    left: -5px; 
    transform:    rotate(29deg) skew(-35deg); 
     -moz-transform: rotate(29deg) skew(-35deg); 
     -ms-transform:  rotate(29deg) skew(-35deg); 
     -o-transform:  rotate(29deg) skew(-35deg); 
     -webkit-transform: rotate(29deg) skew(-35deg); 
    width: 10px; 
} 

如何在我的箭头周围获得边框？感谢您的帮助提前。

Answer 1

在这里你去 - DEMO

.share-bubble { 
 
    background-color: #fff; 
 
    border-radius: 5px; 
 
    box-shadow: 0 0 6px #B2B2B2; 
 
    display: inline-block; 
 
    padding: 10px 18px; 
 
    position: relative; 
 
    vertical-align: top; 
 
    float: left; 
 
    margin: 5px 45px 5px 20px; 
 
} 
 

 
.share-bubble::before { 
 
    background-color: #fff; 
 
    content: "\00a0"; 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    top: 11px; 
 
    transform:    rotate(29deg) skew(-35deg); 
 
     -moz-transform: rotate(29deg) skew(-35deg); 
 
     -ms-transform:  rotate(29deg) skew(-35deg); 
 
     -o-transform:  rotate(29deg) skew(-35deg); 
 
     -webkit-transform: rotate(29deg) skew(-35deg); 
 
    width: 20px; 
 
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4); 
 
    left: -9px; 
 
}

 

 
<div class="share-bubble">0</div>

您还可以看到点击 “运行代码片断” 演示..

Answer 2

你要添加的box-shadow在你的.share-bubble ::之前。