<div class="bubble-box"> <h5>带三角的tooltip气泡</h5> </div>
一、带边框的向上三角形
.bubble-box { position: relative; margin: 50px auto; padding: 40px; width: 280px; height: 100px; background: #f00; border: 4px solid #00f; border-radius: 6px; } .bubble-box:after, .bubble-box:before { position: absolute; bottom: 100%; left: 50%; content: " "; width: 0; height: 0; border: solid transparent; pointer-events: none; } .bubble-box:after { margin-left: -30px; border-color: rgba(255, 0, 0, 0); border-bottom-color: #f00; border-width: 30px; } .bubble-box:before { margin-left: -36px; border-color: rgba(0, 0, 255, 0); border-bottom-color: #00f; border-width: 36px; }
二、带边框的向右三角形
.bubble-box { position: relative; margin: 50px auto; padding: 40px; width: 280px; height: 100px; background: #f00; border: 4px solid #00f; border-radius: 6px; } .bubble-box:after, .bubble-box:before { position: absolute; top: 50%; left: 100%; content: " "; width: 0; height: 0; border: solid transparent; pointer-events: none; } .bubble-box:after { margin-top: -30px; border-color: rgba(255, 0, 0, 0); border-left-color: #f00; border-width: 30px; } .bubble-box:before { margin-top: -36px; border-color: rgba(0, 0, 255, 0); border-left-color: #00f; border-width: 36px; }
三、带边框的向下三角形
.bubble-box { position: relative; margin: 50px auto; padding: 40px; width: 280px; height: 100px; background: #f00; border: 4px solid #00f; border-radius: 6px; } .bubble-box:after, .bubble-box:before { position: absolute; top: 100%; left: 50%; content: " "; width: 0; height: 0; border: solid transparent; pointer-events: none; } .bubble-box:after { margin-left: -30px; border-color: rgba(255, 0, 0, 0); border-top-color: #f00; border-width: 30px; } .bubble-box:before { margin-left: -36px; border-color: rgba(0, 0, 255, 0); border-top-color: #00f; border-width: 36px; }
四、带边框的向左三角形
.bubble-box { position: relative; margin: 50px auto; padding: 40px; width: 280px; height: 100px; background: #f00; border: 4px solid #00f; border-radius: 6px; } .bubble-box:after, .bubble-box:before { position: absolute; top: 50%; right: 100%; content: " "; width: 0; height: 0; border: solid transparent; pointer-events: none; } .bubble-box:after { margin-top: -30px; border-color: rgba(255, 0, 0, 0); border-right-color: #f00; border-width: 30px; } .bubble-box:before { margin-top: -36px; border-color: rgba(0, 0, 255, 0); border-right-color: #00f; border-width: 36px; }