带有长方体阴影的CSS语音气泡
带有长方体阴影的CSS语音气泡
提问于 2012-01-15 08:55:23
创建一个使用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;
}回答 5
Stack Overflow用户
回答已采纳
发布于 2012-01-15 12:59:54
你可以使用transform旋转一个box-shadow，而不是使用三角形技巧，而是得到一个真正的div。由于您只需要在div的一侧(可见的三角形一侧)上的阴影，因此您必须使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;
}输出：
Stack Overflow用户
发布于 2012-10-23 00:11:33
这是一个完整的(S)CSS的complete working example，带有鼻子大小阴影宽度的变量和一个可选的边框。
诀窍是获得偏移量和正确的变换以实现像素完美，并根据需要使用overflow:hidden来切割气泡的鼻子(特别是在需要边界的情况下)。
上面答案中的例子对我们不起作用，因为阴影被裁剪并覆盖在主要的气泡区。
在IE7/8中正常降级。
HTML：
<div class="chat">
<div class="bubble">
<span class='tail'> </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 );
}Stack Overflow用户
发布于 2014-10-03 01:20:08
另一种解决方案是使用filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));，它只在对象形状周围放置阴影。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8866736
复制相关文章
相似问题