小程序和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一些实用技巧小结
Mar 18 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
express框架下使用session的方法
Jul 31 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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调用三种数据库的方法(1)
2006/10/09 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 事件对象的实现
2009/07/13 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python实现多线程抓取妹子图
2015/08/08 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
会计出纳岗位职责
2013/12/25 职场文书
社区党员先进事迹
2014/01/22 职场文书
广告学毕业生求职信
2014/01/30 职场文书
小学毕业感言500字
2014/02/28 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
银行给客户的感谢信
2015/01/23 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS