如何用 css 绘制三角形?

本贴最后更新于 1778 天前,其中的信息可能已经沧海桑田

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

<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

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


线上体验地址
所有的源码都可以在我的仓库地址:下载

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 541 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • csfwff 1

    学习了 👍 huaji

    1 回复
  • zhujie
    作者

    可以关注我的个人公众号,每天推送前端技术相关的文章。

    qrcode8.jpg

    该回帖因偏离主题而被折叠
    1 回复
    1 操作
    adlered 在 2020-05-08 09:42:12 折叠了该回帖
  • adlered 1 1 评论 via macOS

    我觉得不行,别让我再看到你打广告,你回复一条,我折叠一条。

    1 回复
    补充一下,楼主自己帖子下的回帖楼主也有折叠和取消折叠权限,另外,每个人只能折叠或者取消折叠一次。
    88250
  • zhujie
    作者

    😂

zhujie
每天一个前端技术问题,可以关注我的公众号查看。 深圳

推荐标签 标签

  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3194 引用 • 8214 回帖 • 2 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 721 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 145 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    153 引用 • 281 回帖
  • sts
    2 引用 • 2 回帖 • 222 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖 • 1 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 40 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1794 回帖 • 1 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 660 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 297 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 407 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    364 引用 • 1840 回帖 • 3 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 796 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    295 引用 • 750 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 2 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 10 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 513 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 589 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 635 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    169 引用 • 3834 回帖 • 1 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 363 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 817 关注
  • Outlook
    1 引用 • 5 回帖 • 2 关注