CSS实现实心三角形箭头

CSS实现实心三角形箭头_第1张图片

wxss代码:

.arrow{
  width: 0;
  height: 0;
  border-width: 50rpx;
  border-style: solid;
  border-color: red blue black bisque
}

wxml代码:

需要箭头指向哪个方向,只需将其余三个方向的border-color属性设置为transparent,例如 箭头向下

CSS实现实心三角形箭头_第2张图片

.arrow{
  width: 0;
  height: 0;
  border-width: 50rpx;
  border-style: solid;
  border-color: red transparent transparent transparent
}

 

你可能感兴趣的:(css)