Open yanyue404 opened 6 months ago
<button class="bubble-tag"> <span> 透明气泡框(带上箭头)</span> </button>
.bubble-tag { position: relative; display: flex; justify-content: center; height: 40px; line-height: 40px; background: #ffffff; border: 1px solid #aaaaaa; text-align: center; font-size: 24px; color: #999; border-radius: 18px; margin: 0px auto 15px; padding: 0 20px; span { display: inline-block; height: 98%; background: #fff; z-index: 1; } // 有色的等腰三角形 &:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 22px 20px 22px; border-color: transparent transparent #ccc transparent; position: absolute; top: -18px; right: 50%; transform: translateX(50%); } // 白色的等腰三角形(比上面的稍小一点点) &::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 20px 18px 20px; border-color: transparent transparent #ffffff transparent; position: absolute; top: -17px; right: 50%; transform: translateX(50%); } }
参考