如何用css绘制三角形?

首先,我们知道用边框实现一个三角形很简单,直接上代码上图。

<div class="content">
       <div class="up"></div>
</div>
.triangleTest {
        .content div {
            width: 0;
            height: 0;
            &.up {
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 100px solid red;
                border-top: 0;
            }
        }
    }

上三角

可以看到实现一个三角形很简单,但是本文会从原理上来讲解,为什么会这样展示。

#box{
            width:200px;
            height:200px;
            background:yellow;
            border-top: 80px solid red;
            border-right:80px solid black;
            border-bottom:80px solid green;
            border-left:80px solid blue;
        }

原理

可以看到,盒子宽高都为200px,边框都是80px,由于边框颜色不同,可以很明显的看出是以体形的方式向内容区域(黄色区域),覆盖。如果长或者宽小于最大边框时,则内容区域不可见(黄色区域),就是说当盒子长宽小于160px(80 + 80)那么表现出来就是4个三角形。

三角形
我们再回到第一个例子,就很好解释为啥是个三角形了,因为左边和右边边框都是透明色,看不到,所以就只能看到底边框形成的一个向上的三角形。
根据上面的原理,我们能实现很多种三角形,梯形。

.left {
                border-left: 50px solid red;
                border-top: 50px solid red;
                border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
            }

4.png

.right {
                border-left: 50px solid transparent;
                border-top: 50px solid transparent;
                border-right: 50px solid red;
                border-bottom: 50px solid red;
            }

5.png

.bottom-left {
                width: 120px;
                height: 120px;
                background-color: transparent;
                border-left: 50px solid transparent;
                border-top: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 50px solid red;
            }

6.png

可以看到,理解了边框实现三角形的原理,就能绘制各式各样的图形了。


线上体验地址
所有的源码都可以在我的仓库地址:下载
个人公众号:长按保存关注

学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。

posted @   前端小赤佬  阅读(109)  评论(0编辑  收藏  举报
编辑推荐:
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示