博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序和web画三角形
阅读量:4952 次
发布时间:2019-06-11

本文共 660 字,大约阅读时间需要 2 分钟。

如图:

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

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

页面代码:

主要是理解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;

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

转载于:https://www.cnblogs.com/PiaoYu/p/11444069.html

你可能感兴趣的文章
算法18-----判断是否存在符合条件的元素【list】
查看>>
《刑法》关于拐卖妇女儿童犯罪的规定
查看>>
Windows的本地时间(LocalTime)、系统时间(SystemTime)、格林威治时间(UTC-Time)、文件时间(FileTime)之间的转换...
查看>>
alias重启后失效了
查看>>
RestTemplate的Object与Entity的区别
查看>>
Fireworks基本使用
查看>>
《代码整洁之道》学习记录
查看>>
C++深入理解虚函数
查看>>
c#线程学习笔记一---基本概念
查看>>
2018-4-13
查看>>
两台电脑间的消息传输
查看>>
Linux 标准 I/O 库
查看>>
Spring Data JPA教程, 第八部分:Adding Functionality to a Repository (未翻译)
查看>>
教练技术的小应用
查看>>
.net Tuple特性
查看>>
Java基础常见英语词汇
查看>>
iOS并发编程笔记【转】
查看>>
泛型 T的定义<1>
查看>>
thinkphp dispaly和fetch的区别
查看>>
08号团队-团队任务5:项目总结会
查看>>