CSS画出三角形的做法

引言:

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

方法:

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

做法:

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

此时效果图为

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

代码:

效果图为:

相关推荐
胡西风_foxww24 分钟前
【ES6复习笔记】Spread 扩展运算符(8)
前端·笔记·es6·扩展·运算符·spread
小林爱1 小时前
【Compose multiplatform教程08】【组件】Text组件
android·java·前端·ui·前端框架·kotlin·android studio
跨境商城搭建开发1 小时前
一个服务器可以搭建几个网站?搭建一个网站的流程介绍
运维·服务器·前端·vue.js·mysql·npm·php
hhzz1 小时前
vue前端项目中实现电子签名功能(附完整源码)
前端·javascript·vue.js
秋雨凉人心1 小时前
上传npm包加强
开发语言·前端·javascript·webpack·npm·node.js
NoneCoder2 小时前
CSS系列(37)-- Overscroll Behavior详解
前端·css
Nejosi_念旧2 小时前
使用Webpack构建NPM Library
前端·webpack·npm
前端切圖仔2 小时前
失业,仲裁,都赶上了(二)
前端·javascript·程序员
冰红茶-Tea2 小时前
typescript数据类型(二)
前端·typescript
slongzhang_2 小时前
elementPlus消息组件多按钮案例
前端·javascript·vue.js