小程序和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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
javascript if条件判断方法小结
May 17 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
详解如何使用nvm管理Node.js多版本
May 06 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
投票管理程序
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python实现扫描ip地址的小程序
2019/04/16 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
市场部专员岗位职责
2013/11/30 职场文书
党员学习十八大感想
2014/01/17 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2016七夕情人节感言
2015/12/09 职场文书
Python集合的基础操作
2021/11/01 Python