小程序和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函数
Aug 01 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
CI框架数据库查询之join用法分析
2016/05/18 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python getopt模块使用实例解析
2019/12/18 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
ORACLE第二个十问
2013/12/14 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
市场部规章制度
2014/01/24 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
求职简历自荐信
2014/06/18 职场文书
交通事故和解协议书
2014/09/25 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
保险内勤岗位职责
2015/04/13 职场文书
毕业设计答辩开场白
2015/05/29 职场文书