css 气泡箭头 |css正方形旋转

/* 创建气泡容器 */
.bubble {
position: relative;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
max-width: 200px;
}
/* 为气泡容器添加箭头 */
.bubble:after {
content: "";
position: absolute;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #fff transparent transparent transparent;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
/* 调整箭头的位置以适应需要 */
.bubble.top:after {
top: -10px;
bottom: auto;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
}
.bubble.left:after {
left: 10px;
transform: translateY(-50%) rotate(90deg);
border-width: 10px 10px 10px 0;
border-color: transparent #fff transparent transparent;
}
.bubble.right:after {
right: 10px;
transform: translateY(-50%) rotate(-90deg);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #fff;
}

这段 CSS 代码中，大家首先为气泡容器定义了一些样式，用于使容器看起来更美观和实用。接下来，大家使用 CSS 伪元素 :after 来添加箭头。通过控制 border 的大小和位置，大家可以创建出不同方向的箭头，然后再调整箭头的位置和方向。这样做可以允许大家完全根据需要来控制气泡箭头的效果。