css制作箭头
使用 CSS 边框制作箭头
通过调整元素的 border 属性，可以创建简单的箭头效果。利用边框的透明特性，只显示一个方向的边框。
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}调整 border-left、border-right、border-top 或 border-bottom 的宽度和颜色，可以改变箭头的方向和大小。
使用伪元素制作箭头
通过 ::before 或 ::after 伪元素结合 transform 旋转，可以创建更灵活的箭头。
.arrow {
position: relative;
width: 100px;
height: 30px;
background: #000;
}
.arrow::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 20px;
height: 20px;
background: #000;
}使用 SVG 内联制作箭头
SVG 提供了更精细的控制，适合复杂或自定义箭头。
<div class="arrow">
<svg viewBox="0 0 20 20" width="20" height="20">
<path d="M0 10 L20 10 L10 0 Z" fill="#000" />
</svg>
</div>使用 clip-path 制作箭头
clip-path 可以裁剪元素形状，适合现代浏览器。
.arrow {
width: 100px;
height: 50px;
background: #000;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}使用 Unicode 符号
简单场景可以直接使用 Unicode 箭头符号。
<span class="arrow">→</span>.arrow {
font-size: 24px;
color: #000;
}每种方法适用于不同场景，边框法适合简单箭头，伪元素和 SVG 适合自定义设计，而 Unicode 适合快速实现。
