小程序和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实现图片轮播效果代码
Sep 03 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
JS实现网页端猜数字小游戏
Mar 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
PHP中单引号与双引号的区别分析
2014/08/19 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
BootStrap数据表格实例代码
2017/09/13 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
python如何快速生成时间戳
2020/07/21 Python
python定义类的简单用法
2020/07/24 Python
flask框架中的cookie和session使用
2021/01/31 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
奶茶专卖店创业计划书
2014/01/18 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python