如何用css画三角形?
css画三角形的原理
我们先来看一段代码:
当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后。
<!DOCTYPE html> <html> <body> <style> #triangle-up { width: 100px; height: 100px; border: 100px solid transparent; border-right: 100px solid red; border-left: 100px solid blue; border-top:100px solid yellow; border-bottom:100px solid green; } </style> <div id="triangle-up"></div> </body> </html>
效果图:
此时如果设置这个div的height和width为0,其他不变,会得到下面这个图形效果:
上面这个效果是不是就有很多个三角形,但是因为我们只想要一个三角形,如果把其他三个三角形的颜色变白,那就只剩下一个了,那么如何使用让其他三角形的颜色背景变白呢?
css中有这样一个属性,transparent,背景透明。这样便可以达到我们的目的让css画出一个三角形。
接下来我们就来看看具体的css画三角形的代码:
<!DOCTYPE html> <html> <body> <style> #triangle{ width: 0; height: 0; border: 100px solid transparent; border-bottom: 100px solid blue; } </style> <div id="triangle"></div> </body> </html>
效果图:
有时候会出现高和底长度有限制的三角形,使用css如何画出来的呢?
看上面css画三角形的代码,我们可以发现,三角形的底为border的两倍,border-bottom为三角形的高。所以我们可以通过设置border-bottom或者border的值来改变底和高。
css画高和底长度有限制的三角形的代码如下:
改变border-bottom的值:
<!DOCTYPE html> <html> <body> <style> #triangle{ width: 0; height: 0; border: 100px solid transparent; border-bottom: 220px solid blue; } </style> <div id="triangle"></div> </body> </html>
效果图:
改变border的值:
<!DOCTYPE html> <html> <body> <style> #triangle{ width: 0; height: 0; border: 60px solid transparent; border-bottom: 100px solid blue; } </style> <div id="triangle"></div> </body> </html>
效果图:
以上就是如何用css画三角形?的详细内容,更多请关注易知道|edz.cc其它相关文章!
相关内容
-
win10多任务按键怎么设置在底部详细方法
win10多任务按键怎么设置在底部详细方法,按键,任务,在使用电脑...
-
怎么设置电脑桌面|怎么设置电脑桌面壁纸
怎么设置电脑桌面|怎么设置电脑桌面壁纸,,怎么设置电脑桌面壁...
-
固定路由器如何设置固定无线路由器设置教程
固定路由器如何设置固定无线路由器设置教程,,如今我们的智能手...
-
如何链接路由器设置TP链接无线路由器设置
如何链接路由器设置TP链接无线路由器设置,,不管是什么品牌的无...
-
icloud设置哪些该打开|icloud在设置哪里打开
icloud设置哪些该打开|icloud在设置哪里打开,,icloud设置哪些...
-
酷派手机恢复出厂设置|酷派手机恢复出厂设置后
酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网,,酷派...
-
设置证书密码是什么|证书初始密码
设置证书密码是什么|证书初始密码,,设置证书密码是什么证书密...
-
设置里程碑|设置里程碑的方法有哪些
设置里程碑|设置里程碑的方法有哪些,,1. 设置里程碑的方法有哪...
-
计算机主板BIOS设置详细-BIOS知识
计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主...
-
金蝶k3入如何设置公式|金蝶K3中计量单位该如何
金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?,,1.金蝶...
-
苹果电脑麦克风设置|苹果电脑允许麦克风在哪里
苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置,,1. 苹果电...
-
笔记本如何设置Fn快捷键|笔记本如何设置fn快捷
笔记本如何设置Fn快捷键|笔记本如何设置fn快捷键,,笔记本如何...
-
花呗怎么设置额度|花呗怎么设置额度调低
花呗怎么设置额度|花呗怎么设置额度调低,,1. 花呗怎么设置额度...
-
金蝶迷你版明细账没有边框|免费的金蝶迷你版凭
金蝶迷你版明细账没有边框|免费的金蝶迷你版凭证录入怎么用?...
-
保护眼睛电脑|保护眼睛电脑屏幕设置
保护眼睛电脑|保护眼睛电脑屏幕设置,,1. 保护眼睛电脑屏幕设置...