CSS画出三角形的做法

引言:

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

方法:

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

做法:

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

此时效果图为

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

代码:

效果图为:

相关推荐
Loo国昌几秒前
Vue 3 前端工程化:架构、核心原理与生产实践
前端·vue.js·架构
sg_knight3 分钟前
拥抱未来:ECMAScript Modules (ESM) 深度解析
开发语言·前端·javascript·vue·ecmascript·web·esm
LYFlied4 分钟前
【每日算法】LeetCode 17. 电话号码的字母组合
前端·算法·leetcode·面试·职场和发展
开发者小天4 分钟前
react中useEffect的用法,以及订阅模式的原理
前端·react.js·前端框架
前端白袍24 分钟前
Vue:如何实现一个具有复制功能的文字按钮?
前端·javascript·vue.js
new code Boy1 小时前
escape谨慎使用
前端·javascript·vue.js
奶球不是球1 小时前
elementplus组件中el-calendar组件自定义日期单元格内容及样式
javascript·css·css3
叠叠乐1 小时前
robot_state_publisher 参数
java·前端·算法
Kiri霧1 小时前
Range循环和切片
前端·后端·学习·golang
小张快跑。2 小时前
【Java企业级开发】(十一)企业级Web应用程序Servlet框架的使用(上)
java·前端·servlet