纯css实现向上或向下的三角形

效果图：

代码：

<view>
    <view class="upDriangle"></view>
</view>
<style>
.upDriangle{
		width: 0px;
		height: 0px;
		border: 8rpx solid;
		border-color: transparent transparent #333 transparent;
}
</style>

介绍：

1.准备一个容器设置8rpx的边框，边框高度可按需调整。

2.小箭头方向通过border-color，灵活调整。例如：渲染向下箭头，渲染上边框颜色，其他方向透明色。

优点：

可以通过css设置不同朝向，不同大小的小三角形。

缺点：

上下朝向的三角形位置不在同一位置，若想实现点击切换箭头方向，保持三角形在同一位置，可通过定位布局，定位到同一位置，显隐切换即可。如有更好的实现方式，欢迎评论或私信。

更多实现方式参考以下链接：

css3 纯css实现绘制三角形、箭头效果_css 三角形箭头-CSDN博客