使用 CSS 的 :before 和 :after 选择器做箭头样式
在CSS中，:before和:after伪元素可以用来创建一些视觉效果，比如箭头。以下是一个使用CSS的:before和:after伪元素来创建箭头的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Arrow Example</title>
<style>
.arrow-box {
position: relative;
background: #fff;
border: 1px solid #ccc;
padding: 20px;
margin-top: 20px;
}
.arrow-box:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.arrow-box:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
top: -9px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="arrow-box">
<p>This is an arrow box with CSS.</p>
</div>
</body>
</html>在这个例子中，.arrow-box是包含文本的div元素。:before伪元素用来创建带有边框的箭头底部，颜色为#ccc。:after伪元素用来创建一个稍小的圆形，它是箭头底部的阴影。这些箭头是由透明的边框和实色的边框相互作用形成的。通过调整:before和:after伪元素的border-left和border-right属性，可以改变箭头的大小和形状。
评论已关闭