邊框頂部的陰影和三角形向下在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;}