CSS:N种使用CSS 绘制三角形的方法
目录
6种使用 CSS 实现三角形的技巧
1、使用 border 绘制三角形
2、使用 linear-gradient 绘制三角形
3、使用 conic-gradient 绘制三角形
4、transform: rotate 配合 overflow: hidden 绘制三角形
5、使用 clip-path 绘制三角形
6、利用字符绘制三角形
6种使用 CSS 实现三角形的技巧
1、使用 border 绘制三角形
使用 border 实现三角形应该是大部分人都掌握的,也是各种面经中经常出现的,利用了高宽为零的容器及透明的 border 实现。
简单的代码如下:
div {border-top: 50px solid yellowgreen;border-bottom: 50px solid deeppink;border-left: 50px solid bisque;border-right: 50px solid chocolate;
}
高宽为零的容器,设置不同颜色的 border:
这样,让任何三边的边框的颜色为 transparent
,则非常容易得到各种角度的三角形:
CodePen Demo - 使用 border 实现三角形
2、使用 linear-gradient 绘制三角形
接着,我们使用线性渐变 linear-gradient
实现三角形。
它的原理也非常简单,我们实现一个 45°
的渐变:
div {width: 100px;height: 100px;background: linear-gradient(45deg, deeppink, yellowgreen);
}
让它的颜色从渐变色变为两种固定的颜色:
div {width: 100px;height: 100px;background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
再让其中一个颜色透明即可:
div {background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}
3、使用 conic-gradient 绘制三角形
还是渐变,上述我们使用了线性渐变实现三角形,有意思的是,在渐变家族中,角向渐变 conic-gradient
也可以用于实现三角形。
方法在于,角向渐变的圆心点是可以设置的,类似于径向渐变的圆心点也可以被设置。
我们将角向渐变的圆心点设置于 50% 0
,也就是 center top
,容器最上方的中间,再进行角向渐变,渐变到一定的角度范围内,都是三角形图形。
假设我们有一个 200px x 100px
高宽的容器,设置其角向渐变圆心点为 50% 0
:
并且,设置它从 90°
开始画角向渐变图,示意图如下:
可以看到,在初始的时候,角向渐变图形没有到第二条边的之前,都是三角形,我们选取适合的角度,非常容易的可以得到一个三角形:
div {background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}
上述代码中的 deeppink 45deg, transparent 45.1deg
多出来的 0.1deg
是为了简单消除渐变产生的锯齿的影响,这样,我们通过 conic-gradient
,也轻松的得到了一个三角形。
同理,再配合旋转 rotate
或者 scale
,我们也能得到各种角度,不同大小的三角形。
4、transform: rotate 配合 overflow: hidden 绘制三角形
这种方法还是比较常规的,使用 transform: rotate
配合 overflow: hidden
。一看就懂,一学就会,简单的动画示意图如下:
设置图形的旋转中心在左下角 left bottom
,进行旋转,配合 overflow: hidden
。
完整的代码:
.triangle {width: 141px;height: 100px;position: relative;overflow: hidden;&::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: deeppink;transform-origin: left bottom;transform: rotate(45deg);}
}
5、使用 clip-path 绘制三角形
clip-path
一个非常有意思的 CSS 属性。
clip-path
CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。
也就是说,使用 clip-path
可以将一个容器裁剪成任何我们想要的样子。
通过 3 个坐标点,实现一个多边形,多余的空间则会被裁减掉,代码也非常简单:
div {background: deeppink;clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
6、利用字符绘制三角形
OK,最后一种,有些独特,就是使用字符表示三角形。
下面列出一些三角形形状的字符的十进制 Unicode 表示码。
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △
譬如,我们使用 ▼
实现一个三角形 ▼,代码如下:
<div class="normal">▼ </div>
div {font-size: 100px;color: deeppink;
}
效果还是不错的:
然而,需要注意的是,使用字符表示三角形与当前设定的字体是强相关的,不同的字体绘制出的同一个字符是不一样的,我在Google Font上随机选取了几个不同的字体,分别表示同一个字符,得到的效果如下:
可以看到,不同字体的形状、大小及基线都是不一样的,所以如果你想使用字符三角形,确保用户的浏览器安装了你指定的字体,否则,不要使用这种方式。
CSS:N种使用CSS 绘制三角形的方法相关推荐
- CSS 绘制三角形的方法
目录 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transform: rotate 配合 ove ...
- 运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法 发布时间:2020-09-14 14:49:22 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...
- 前端HTML、CSS、JS绘制三角形的方法
转载自 http://www.daqianduan.com/4721.html <html><head><meta charset="UTF-8"&g ...
- php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- h5画三角形_如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog 在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:"这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢? ...
- css 绘制三角形箭头
转载自:http://ourjs.com/detail/532bc9f36922aa7e1d000001 OurJS 阅读 全端 发布 订阅邮件 用纯CSS实现的箭头 分享到 分类 编程技巧 ...
- 【基础】在css中绘制三角形及相关应用
简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景.利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案. 1 ...
最新文章
- python语言入门m-Python -m参数原理及使用方法解析
- linux中的和||(linux中=和==效果是一样的)
- 负载均衡设备oracle,Oracle RAC 服务器端联接负载均衡(Load Balance)
- 一个监测IIS,并定时重新启动的程序。
- Undefined symbols for architecture i386问题解决方法
- java.util.Locale简介
- Typora Mermaid 使用指南
- spark 窗口函数(Window)实战详解
- R语言批量生成CaseWhen的解决方案
- Java解决高并发下商品库存更新
- 关于十二平均律及律学发展简史
- 街篮最新服务器,街头篮球各区的服务器IP多少
- 2022-2028年中国全屋定制行业发展动态及投资前景分析报告
- 文本生成的几种简单方法
- js 获取开始时间和结束时间相隔小时及分钟(时间戳操作)
- java程序设计方法
- 错误与编程——抛弃 C程序设计 中的谬误与恶习
- 新BOS2.0物流业务逻辑
- 个人主页设计-web前端开发技术(html+css)
- python opencv图像阈值处理
热门文章
- oppor11st升Android p,OPPO R11st刷机教程_OPPO R11st卡刷升级更新官方系统包
- Java基础知识(一),打好基础才能写出高质量代码
- java 富文本 word_Java导出富文本到word
- grep 忽略大小写、忽略grep命令本身
- (一)Yocto的介绍
- 计算机在社会工作和生活中的应用,计算机综合应用能力实训
- 【一篇文章告诉你网格策略从理论到实盘的所有内容(python实现)】
- 【Ogre编程入门与进阶】第九章 动画
- dblp搜文献时各颜色含义
- TRY HACK ME | INTERNAL「渗透测试挑战02」