CSS画出三角形的做法

引言:

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

方法:

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

做法:

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

此时效果图为

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

代码:

效果图为:

相关推荐
马船长几秒前
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
前端·sql·ajax
小句1 分钟前
index.html 调用 ajax
ajax·html
ZZZCY200313 分钟前
OSPF路由计算
前端·javascript·网络
m0_7388202020 分钟前
css3-----2D转换、动画
前端·css
有盐、在见34 分钟前
CSS中字体图标的使用
前端·css
Code成立36 分钟前
用CSS创造三角形案例
css
fishmemory7sec1 小时前
Electron 安装以及搭建一个工程
前端·javascript·electron
upward_tomato1 小时前
electron打包报错-winCodeSign无法下载
前端·javascript·electron
与妖为邻1 小时前
好玩的水表电表
css·html·css3·好玩的电表水表
程序猿进阶1 小时前
React 原理分析
java·开发语言·前端·react.js·面试·前端框架·职业发展