CSS画出三角形的做法

引言:

在网页中,会有三角形的出现,我们脑海里会有很多想法,如何去实现他们,我来提供一种比较好玩的做法。

方法:

我们实现一个三角形,当然可以使用精灵图、或者iconfont的做法,这些做法也十分简便,但是我也有一个不需要下载任何图片或者图标字体的做法,仅需一个盒子就可以实现。

做法:

首先我们需要声明一个盒子,比如说div盒子,但是这个盒子比较特殊,特殊之处就在于这个盒子的宽和高都为0,但是有边框长度。

此时效果图为

很显然,我们只需要留下我们需要的方向的三角形,其他的设置为透明色就OK:

代码:

效果图为:

相关推荐
刘发财6 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
牛奶9 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶9 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol11 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路12 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide12 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter13 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸14 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live0000014 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉14 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化