怎么使用css3画三角形

　　介绍

小编给大家分享一下怎么使用css3画三角形,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

<强>首先看一下css3画三角形的原理

我们先来看一段代码:

当我们设置一个div其宽度与高度为100 px,并且设置其四边框的宽度为100 px,且分别设置其颜色后。

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; body> 　　& lt; style> 　　#三角形{ 　　宽度:100 px; 　　身高:100 px; 　　边界:100 px固体透明; 　　边境:100 px固体红; 　　border-left: 100 px固体蓝色; 　　border-top: 100 px固体黄; 　　边界底部:100 px固体绿色; 　　} 　　& lt;/style> 　　& lt; div id=皌riangle-up"祝辞& lt;/div> 　　& lt;/body> 　　& lt;/html>

这段代码的效果如图:

怎么使用css3画三角形

此时如果设置这个div的高度和宽度为0,其他不变,会得到下面这个图形效果:

怎么使用css3画三角形

上面这个效果是不是就有很多个三角形,但是因为我们只想要一个三角形,如果把其他三个三角形的颜色变白,那就只剩下一个了,那么如何使用让其他三角形的颜色背景变白呢? css3中有这样一个属性,透明,背景透明。这样便可以达到我们的目的让css3画出一个三角形。

<强>接下来我们就来看看具体的css3画三角形的代码:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; body> 　　& lt; style> 　　#{三角形 　　宽度:0; 　　高度:0; 　　边界:100 px固体透明; 　　边界底部:100 px固体蓝色; 　　} 　　& lt;/style> 　　& lt; div id=皌riangle"祝辞& lt;/div> 　　& lt;/body> 　　& lt;/html>

<强> css3画三角形代码如下:

怎么使用css3画三角形

有时候会出现高和底长度有限制的三角形,使用css3如何画出来的呢?

看上面css3画三角形的代码,我们可以发现,三角形的底为边界的两倍,边界底部为三角形的高,所以我们可以通过设置边界底部或者边界的值来改变底和高。

<强> css3画高和底长度有限制的三角形的代码如下:

<强>改变边界底部的值:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; body> 　　& lt; style> 　　#{三角形 　　宽度:0; 　　高度:0; 　　边界:100 px固体透明; 　　边界底部:220 px固体蓝色; 　　} 　　& lt;/style> 　　& lt; div id=皌riangle"祝辞& lt;/div> 　　& lt;/body> 　　& lt;/html>

<强>三角形的效果如下:

怎么使用css3画三角形

<强>改变边界的值:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; body> 　　& lt; style> 　　#{三角形 　　宽度:0; 　　高度:0; 　　边界:60 px固体透明; 　　边界底部:100 px固体蓝色; 　　} 　　& lt;/style> 　　& lt; div id=皌riangle"祝辞& lt;/div> 　　& lt;/body> 　　& lt;/html>

<强>三角形的效果如下:

<强> 怎么使用css3画三角形”> <br/> </强> </p> <p class=看完了这篇文章,相信你对怎么使用css3画三角形有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

怎么使用css3画三角形