CSSでボーダートップシャドウと三角形を下に

Question

私はこれをCSSで実現したいと思います。出来ますか？どうやって？ 私はシャドウだけでなく三角形を使ってボーダートップを作成できますが、これを行うと、三角形の3辺に境界線があり、レンダリングが同じではないという問題があります。

多くのおかげで、

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;}