边框顶部的阴影和三角形向下在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;}