html5 css 三角形,css怎么画三角形?
css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
css怎么画三角形?
三角形实现原理:宽度width为0;height为0;
方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置边框颜色。
(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。
(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。
1、Triangle Up
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
2、Triangle Down
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
3、Triangle Left
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
4、Triangle Right
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
5、Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
6、Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
7、Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
8、Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
更多前端开发知识,请查阅 HTML中文网 !!
html5 css 三角形,css怎么画三角形?相关推荐
- 前端怎么画三角形_css如何画三角形?
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的.下面本篇文章就来给大家介绍一下使用css如何画三角形的方法,希望 ...
- splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框.排序.返回到上一页.导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非 ...
- h5画三角形_如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
- 前端怎么画三角形_用CSS画一个三角形
作者 | 李银城 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是 ...
- css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析 用CSS画三角形,实际上就 ...
- 【前端:css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
- 用CSS画三角形、圆、圆角
用CSS画常见几何图形 利用css盒子边框特性画几何图形. <!DOCTYPE html> <html lang="en"> <head>< ...
- HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
最新文章
- 异构GoldenGate 12c 双向复制配置
- matlab的实用与仿真,MATLAB建模与仿真实用教程
- 推荐算法炼丹笔记:推荐系统采样评估指标及线上线下一致性问题
- 【Linux】一步一步学Linux——arpwatch命令(165)
- 充分使用表格标签(Table)
- nginx应用总结(1)--基础认识和应用配置
- Java设计模式(10)代理模式(Proxy模式)
- win10安装杜比驱动
- 再见,马云!再见,世界首富!
- 《浅谈-Android系统越用反应越慢的问题》
- php spry文本域_SPRY验证文本域之用户名称
- 多周期MACD趋势共振制作的方法
- BADI OVERVIEW
- 微软今中止撑持XP体系 后XP年代带来多少商机
- java unsafe park_java – Unsafe.park vs Object.wait
- Linux配置NAT网络
- 单页应用优化--懒加载
- js逆向,破解企名片网站的加密参数
- Java基础编写猜数游戏
- 五步打造持续变现知识IP
热门文章
- 超干货|使用Keras和CNN构建分类器(内含代码和讲解)
- ECS 按量付费VPC实例停机不收费FAQ
- 从Hadoop到云原生,谈如何消除程序员35岁危机
- 锐捷发布极简以太全光解决方案 打造“不一样”的全光网
- 霍因科技获首届全国信创产业生态创新奖
- 甲骨文Java 14来啦!
- 数据科学家常见的5个SQL面试问题
- 一行 Python 代码能实现这么多丧心病狂的功能?(代码可复制)
- 反转了!“只问了1个框架,就给了35K的Python岗”
- 华为开发者大会上,鸿蒙问世、方舟编译器开源、还有 EMUI 10;壕置100万美元,苹果推出漏洞攻击报告赏金计划……...