css做引导箭头样式 |qt css加载

.arrow {
position: relative;
display: inline-block;
}
.arrow:after {
content: "";
position: absolute;
top: 50%;
right: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid #333;
}

上面的代码是一个基本的引导箭头样式。通过设置“arrow”类的“position”属性为“relative”，使它在文档流中占据空间，用于显示箭头，而不会影响其他元素的布局。接下来，在“arrow:after”伪类中设置箭头的具体样式和位置。将箭头的“content”属性设置为空字符串，因为箭头本身不需要显示任何文本。箭头通过“border-top”、“border-bottom”和“border-left”三个属性绘制。其中，“border-left”属性的宽度为10px，是为了让箭头看起来更突出。

.arrow {
position: relative;
display: inline-block;
}
.arrow:after {
content: "";
position: absolute;
top: 50%;
right: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid #333;
}
.arrow.top {
transform: rotate(180deg);
}
.arrow.left:after {
right: auto;
left: -10px;
bottom: -5px;
margin-top: 0;
margin-bottom: -5px;
border-top: 5px solid #333;
border-right: none;
}
.arrow.right:after {
left: auto;
right: -10px;
bottom: -5px;
margin-top: 0;
margin-bottom: -5px;
border-top: 5px solid #333;
border-left: none;
}

上面的代码实现了三种常见的引导箭头样式：向上的箭头、“左箭头”和“右箭头”。其中，“.top”类使箭头朝上，使用“transform: rotate(180deg)”实现旋转。对于“左箭头”和“右箭头”，需要在箭头的基本样式上添加一些属性才能显示出来。这在代码中通过添加“.left”和“.right”类来完成。注意到，“left”类中设置“right”为“auto”，因为箭头需要出现在目标元素左侧，而“right”属性在这种情况下不适用。相应地，在“right”类中将“left”设置为“auto”。