小程序笔记(五)之实现三角形箭头

一.前言
楼主去年刚开始接触小程序的时候,基本都是采用贴图的方式,连一个三角形图标也是,最近又遇到类似的需求,直接一个css搞定.特此做个记录

二.实现举例
wxml文件

<view class="san">
</view>

wxss文件
1.上箭头

.san {margin-left: 200rpx;width: 0;height: 0;border-width: 25rpx;     /*控制箭头的大小 */border-style: solid;border-color:transparent transparent blueviolet transparent;
}

2.下箭头

.san {margin-left: 200rpx;width: 0;height: 0;border-width: 25rpx;     /*控制箭头的大小 */border-style: solid;border-color:greenyellow transparent transparent transparent;
}

3.左箭头

.san {margin-left: 200rpx;width: 0;height: 0;border-width: 25rpx;     /*控制箭头的大小 */border-style: solid;border-color:transparent yellow transparent transparent;
}

4.右箭头

.san {margin-left: 200rpx;width: 0;height: 0;border-width: 25rpx;     /*控制箭头的大小 */border-style: solid;border-color:transparent transparent transparent tomato;
}

三.总结
1.箭头的方向是由border-color来控制箭头的方向,对应的方向分别是下左上右
2.border-style控制三角形线的样式
3.border-width控制箭头的大小

小程序笔记(五)之实现三角形箭头相关推荐

wx小程序笔记（2）
wx小程序笔记第三章:常用组件第一节:scroll-view组件 view: scroll-view: 设置横向滚动: 设置竖向滚动: scrolltoupper和scrolltolower事件: ...
微信小程序笔记（三）Wepy使用记录—Stylus预编译基本使用
Wepy使用记录-Stylus预编译基本使用坏境搭建请前往wepy框架官网淘宝 NPM 镜像 wepy新建wpy初始化模板参考创建空项目使用wepy init empty 项目名称命令来创 ...
wx小程序笔记（1）
wx小程序笔记第一章:小程序前奏第一节:账号和软件第二章:小程序基础第一节:项目结构第二节:配置第三节:WXML语法数据绑定(js数据) 条件渲染(判断) 列表渲染(循环) wx:key ...
小程序笔记（四）发表评论或者普通发帖
做个简单的wxml页面 <view class='by'><view class='sct'>发表您的评论</view><view class='sccv'& ...
小程序笔记（二）另一种方便获取wxapkg方法
1.首先先下载一个夜神模拟器(为什么用夜神..因为我android开发测试用到,不想用android studio自带的虚拟机,所以就用夜神模拟器) 然后当然是打开夜神模拟器,下载一个微信然后打开微 ...
uni-app开发小程序,笔记记录6 商品详情页
学习地址零基础玩转微信小程序:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署) uniapp - 黑马优购笔记地址知识点 1 数据加 ...
微信小程序笔记（一）初次接触小程序开发
微信小程序的初步使用昨个写了个Vue的小练习,今天再来个微信小程序的练习.数据绑定上大致跟vue的用法差不多,可惜了不会CSS,要不写起来能顺溜不少.这么一看还是写Android顺手. 1.创建 ...
微信小程序笔记、小程序打印
小程序介绍目录结构 app.js //程序的入口 App({//小程序的生命周期函数onLaunch: function () {this.globalData.sysinfo = wx.getSy ...
微信小程序框架(五)-全面详解（学习总结---从入门到深化）
目录 UI框架_TDesign 引入TDesign UI框架_TDesign组件 Rate 评分 Toast 轻提示 UI框架_Vant 使用方式引入组件 UI框架_Vant组件 Overlay 遮 ...

小程序笔记(五)之实现三角形箭头

小程序笔记(五)之实现三角形箭头相关推荐

最新文章

热门文章