css怎么实现气泡三角 |css3 美化单选

气泡三角是指在弹出框、提示框等容器中，经常出现的一个小三角形，用于指示该容器是由哪个元素触发的。下面大家来看看如何用CSS实现一个简单的气泡三角。

/* HTML代码 */
<div class="container">
<p>这是弹出框的内容</p>
<span class="triangle"></span>
</div>
/* CSS代码 */
.container {
position: relative;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
.triangle {
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #eee transparent;
}

上述代码中，大家先在一个div容器中放置了一个段落元素和一个用于显示三角的span元素。然后设置.container容器的position属性为相对定位。接着，大家为.triangle元素设置了position属性为绝对定位，并利用top、left、margin-left属性将其定位在容器顶部的中心位置。最后，大家使用border-style属性定义三角的样式，border-width属性定义三角的大小，border-color属性定义三角的颜色，以实现气泡三角的效果。

总之，用CSS实现气泡三角的效果，主要是利用绝对定位、border属性和各种技巧来达到效果。