沛县建设局网站,黄骅港船舶动态信息平台,系统开发语言,校园网站html模板CSS实现三角形 前言第一种:bordertransparent第二种borderrgb使用unicode字符 前言
本文讲解三种实现三角形的方式#xff0c;并且配有图文以及代码解说。那么好#xff0c;本文正式开始。
第一种:bordertransparent
border是边框#xff0c;而transparent是透明的颜色transparent第二种borderrgb使用unicode字符 前言
本文讲解三种实现三角形的方式并且配有图文以及代码解说。那么好本文正式开始。
第一种:bordertransparent
border是边框而transparent是透明的颜色下图为它俩结合实现的三角形样式。
!DOCTYPE html
htmlheadmeta charsetutf-8title三角形/titlestyle* {margin: 0;padding: 0;}body {min-height: 100vh;background: linear-gradient(-135deg, #4230cc, #00aaff)}.demo {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid gray;border-top: 50px solid black;border-bottom: 50px solid lightblue;border-right: 50px solid lightgray;}.demo1 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid gray;border-right: 50px solid transparent;border-top: 50px solid transparent;border-bottom: 50px solid gray;}.demo2 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid transparent;border-top: 50px solid transparent;border-bottom: 50px solid lightblue;border-right: 50px solid lightblue;}.demo3 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid lightgray;border-top: 50px solid lightgray;border-bottom: 50px solid transparent;border-right: 50px solid transparent;}.demo4 {margin: 10px;float: left;width: 0;height: 0;border-left: 50px solid transparent;border-top: 50px solid black;border-bottom: 50px solid transparent;border-right: 50px solid black;}/style/headbodydivdiv classdemo/divdiv classdemo1/divdiv classdemo2/divdiv classdemo3/divdiv classdemo4/div/div/body
/html在上述代码中主要是利用borderCSS样式以及transparent透明度来实现三角形调用再class为demo的div中我们分别给上下左右边框赋不同的颜色且相同的大小时我们会发现我们有四个不同方向的三角形那么我们就可以给其他任意两个方向的边框设置成透明然后再给两个方向设置成相同颜色可以得到一个直角三角形或者只给一个方向设置颜色也可以得到一个等腰三角形。
第二种borderrgb
!DOCTYPE html
html
headstyle.rgb {width:0;height:0;border-top:50px solid gray;border-right:50px solid rgb(0, 0, 0,0);border-left:50px solid rgb(0,0,0,0);border-bottom:50px solid red;}/style
/head
bodydiv classrgb/div/body
/htmlborderrgb属性也可以实现三角形效果,实现原因是rgb的第四个属性为透明度和transparent透明颜色有异曲同工之妙所以再某种程度上transparentrgb第四个属性为0所以borderrgb也可以实现相同的三角形效果。
使用unicode字符
unicode字符也可以实现三角形不过不能改变它的方向#9650
!DOCTYPE html
html
headstyle.str {font-size:100px;}/style
/head
bodydiv classstr#9650/div
/body
/html这个也可以实现三角形效果可以通过调用font-size长度来对这个三角形字符大小进行调整。
