（图文详解）最详细的教程，教会你纯CSS画三角形，一分钟弄懂原理。

最新推荐文章于 2024-03-19 08:00:00 发布

龙司机

最新推荐文章于 2024-03-19 08:00:00 发布

阅读量334

点赞数

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44456333/article/details/115047433

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（图文详解）教会你纯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如何画三角形，还有很多形状都是类似这样的原理。感兴趣的可以上网看一下。如有错误，恳请指正。

龙司机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（图文详解）最详细的教程，教会你纯CSS画三角形，一分钟弄懂原理。

（图文详解）教会你纯CSS画三角形，一分钟弄懂原理。如图所示： <style> div { width: 0; height: 0; border: 50px solid transparent; border-bottom: 50px solid black; } </style> <body> <div
复制链接

扫一扫