建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
CSS
.bubble { width: 200px; height: 50px; background:hsla(93,96%,62%,1); padding: 12px; position: relative; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .bubble:before { content: ""; width: 0; height: 0; position: absolute; z-index:-1; } .bubble.bubble-left:before { right: 90%; top: 50%; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); transform: rotate(-25deg); border-top: 20px solid transparent; border-right: 80px solid hsla(93,96%,62%,1); border-bottom: 20px solid transparent; } div { margin:50px; }
-
HTML
<div class="bubble bubble-left">左侧消息提示框<br>class="bubble bubble-left"</div>