css3三角气泡尖头 |css页面高度比例

.bubble {
position: relative;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.bubble:before {
content: "";
display: block;
position: absolute;
border-style: solid;
border-width: 10px 10px 0;
border-color: #ccc transparent;
bottom: -10px;
left: calc(50% - 10px);
transform: rotate(45deg);
}

代码中的.bubble表示创建一个气泡的类名，它的position属性被设置为relative，这样气泡的:before伪元素就以这个为参照点来定位。

接下来是:before伪元素的样式。它的content属性被设置为空，因为大家不需要在气泡尖头中添加任何内容。display属性被设置为block，这样它就变成了一个矩形块。position属性被设置为absolute，这样它就可以脱离文档流，不会影响到其他元素的位置。border-style属性被设置为solid，表示它的边框样式为实线。border-width属性被设置为10px 10px 0，分别表示上边框、左右边框、底边框的宽度。border-color属性被设置为#ccc transparent，表示边框颜色由灰色和透明色组成。bottom和left属性表示该伪元素与气泡底部对齐，且在水平方向上居中显示，这些位置值需要根据实际情况进行微调。最后，transform属性被设置为rotate(45deg)，表示将该伪元素旋转45度。

这便是使用CSS3实现三角气泡尖头的方法，可根据实际需求进行调整。