html - 阴影框 css 箭头/气泡元素
问题描述
我需要框阴影以下气泡的轮廓。
<div class=speech-bubble-dark></div>
.speech-bubble-dark {
position: absolute;
background: #fff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 0.4em;
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
编辑:代码错误,复制了我正在做的一些测试。
解决方案
我不确定,但出于某种原因,当我们谈论阴影时,它涉及到页面的另一面,我相信。找到了三个选项,但使用其他 CSS 属性可能会更好第一个解决方案是对颜色进行一些操作
.speech-bubble-dark {
position: absolute;
background: #fff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 0.4em;
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #eef;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
第二个,正如上面评论中提到的使用过滤器:阴影,但带有另一个气泡的阴影。这不是一个很好的视觉效果
.speech-bubble-dark {
position: absolute;
background: #fff;
filter: drop-shadow(0 7px 5.5px rgba(0, 0, 0, 0.2));
border-radius: 0.4em;
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #eee;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
.speech-bubble-dark::after {
content: ' ';
width: 98%;
height: 1px;
background-color: transparent;
position: absolute;
top: -2.5px;
right: 1%;
border-radius: 1em;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
}
第三个在我看来一定是最好的
.speech-bubble-dark {
position: absolute;
background: #fff;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
border-radius: 0.4em;
border:1px ridge rgba(0, 0, 0, 0.1);
width: 300px;
top: 55px;
left: -100px;
z-index: 999;
}
.speech-bubble-dark:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #eef;
border-top: 0;
margin-left: -15px;
margin-top: -15px;
}
.speech-bubble-dark::after {
content: ' ';
width: 98%;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);;
position: absolute;
top: -1px;
right: 1%;
border-radius: 1em;
box-shadow: 0 -0.1 2px rgba(0, 0, 0, 0.2);
}
推荐阅读
- node.js - Cloudinary:process.versions.node 未定义
- mysql - MySQL 如果不存在则创建表并仅在创建表时插入记录
- angularjs - Can't access $scope variables after changing view with $location.path
- objective-c - Block retaining self for CGFloat ivars?
- python - Jupyter Notebook Python 不会显示输出图表
- assembly - Does the LSL instruction ever set the oVerflow flag in an ARM processor?
- ios - How to check and delete duplicates values in TableView?
- oracle - 如何使用 Oracle 的选择查询格式化日期字段
- javascript - 使用 while 和 continue 时陷入无限循环
- c++11 - 窗户插座。FD_ISSET 总是返回 0