小程序和web画三角形实现解析


Posted in Javascript onSeptember 02, 2019

如图:

小程序和web画三角形实现解析

三角形,在很多时候,需要用到,例如tib提示信息,很多都是需要三角形来做辅助效果,在css样式中,代码如下:

.Trianglebox{
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: transparent blueviolet transparent transparent;
  border-width: 100px;
}

页面代码:

<div class="Trianglebox">
  </div>

主要是理解border的属性, border-style设置边框的样式, border-width设置宽度, border-color设置颜色

设置div的宽度和高度为0px,然后设置边框的宽度, border-color:上,右,下,左,分别设置他们的颜色,如果想要三角形朝左,则设置div的右边颜色,其他边框设置为透明 transparent,这样就可以了

小程序画三角形:

代码:

width: 0rpx;
 height: 0rpx;
 border-bottom: 8rpx solid transparent;
 border-top: 8rpx solid transparent;
 border-right: 8rpx solid #f6f6f6;

设置底部,上部,右部的边框,左边不设置,这样三角形就会朝左原理一样

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
jQuery选择器全面总结
Jan 06 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 #Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 #Javascript
js中比较两个对象是否相同的方法示例
Sep 02 #Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 #Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 #Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 #Javascript
You might like
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
jquery实现穿梭框功能
2021/01/19 jQuery
Python编程实现正则删除命令功能
2017/08/30 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python用input输入列表的实例代码
2020/02/07 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
开业主持词
2014/03/21 职场文书
保险公司早会主持词
2014/03/22 职场文书
书香家庭事迹材料
2014/05/09 职场文书
悬空寺导游词
2015/02/05 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android