(图文详解)教会你纯CSS画三角形,一分钟弄懂原理。
如图所示:
<style>
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid black;
}
</style>
<body>
<div> </div>
</body>
此时,三角形就画好了。那么有读者就会有疑问了,div宽高都设置为零呀?其实三角形的大小是由边框大小挤压画出来的,而不是div的宽高来决定的。我们来看下,是怎么发生变化的。
为了方便读者们更清楚的看懂,我把边框的详细样式写出来。刚开始的写法是简写的样式。
<style>
div
{
border-top: 50px solid black;
border-left: 50px solid red;
border-right: 50px solid green;
border-bottom:50px solid yellow;
}
</style>
<body>
<div>
</div>
</body>
如图:
有读者就会有疑问了,为啥为会出现这样一长条占满整个屏幕呀。因为div元素是块级元素,不给设置宽度是自动充满一整行,因为没有内容没有设置高度。div上的高度是由上、下边框所撑起来的。
我们会发现左右两边是三角形,上下两边是梯形。
如果我们现在给宽度设置到一半呢,会出现什么情况?
<style>
div
{
border-top: 50px solid black;
border-left: 50px solid red;
border-right: 50px solid green;
border-bottom:50px solid yellow;
width: 50%;
}
</style>
<body>
<div>
</div>
</body>
如图:
很明显受到宽度的影响变短了,那如果我们把宽度设置成0px的时候会发生什么情况呢?
<style>
div
{
border-top: 50px solid black;
border-left: 50px solid red;
border-right: 50px solid green;
border-bottom:50px solid yellow;
width: 0px;
}
</style>
<body>
<div>
</div>
</body>
如图:
我们就会很神奇的看到,是由四个三角形组成的一个正方形。那为什么会出现这样的情况呢。
是因为这是由边框的挤压所产生的效果,文章的开头我们就提到过了。
那么为什么是由边框挤压产生的三角形呢,我给大家看下边框的一张图就明白了。
如图:
我们可以看到边框与边框之间是有重合交界的地方的,如上图我们看到的四个角,每个边框的重合线位置。当我们设置的数值不大时肉眼很难看出效果。但是一但当边框的数值都设置的很大过后,会发现每个边框都会沿着重合线的地方挤压,而超过重合线区域的颜色就会消失。进而就出现了由四个三角形组成的一个正方形的样子。
可是现在还是没有画出我们想要的三角形效果呀。这还不简单嘛,我们把我们想要的一边的颜色保留住,其他的都设置成透明的不就看到我们想要的三角形了嘛。
如图:
<style>
div
{
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom:50px solid yellow;
width: 0px;
}
</style>
<div>
</div>
想要那边的三角形,什么顺序的就保留我们哪边的颜色,把其他边的颜色设置成透明的就行了。
简单的总结了一下css如何画三角形,还有很多形状都是类似这样的原理。感兴趣的可以上网看一下。如有错误,恳请指正。