边界顶部阴影和三角形在css下来

Question

我想在CSS中实现类似的功能。可能吗？怎么样？ 我可以创建一个带阴影和三角形的边框顶部，但如果我这样做的问题是三角形的三边有一个边框，所以渲染是不一样的。

非常感谢，

Answer 1

你可以试试这个：

<span class="bubble">Speech bubble with a border</span>

的CSS：

body { padding: 100px 10px;text-align: center;}
.bubble {
    background-color: #eee;border: 2px solid #333;box-shadow: 5px 1px 5px #888888;border-radius: 5px;color: #333;display: inline-block;font:16px/24px sans-serif;padding: 12px 24px;position: relative;}
.bubble:after,
.bubble:before {
    border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #eee;bottom: -20px;content: '';left: 50%;margin-left: -20px;position: absolute;}
.bubble:before {
    border-left: 23px solid transparent;border-right: 23px solid transparent;border-top: 23px solid;border-top-color: inherit;bottom: -23px;margin-left: -23px;}