本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下利用CSS绘制三角形的N种技巧。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而经常的回答通常也只有使用 border 进行绘制一种方法。
而 CSS 发展到今天,其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式,本文将具体罗列讲讲。
通过本文,你能了解到 6 种使用 CSS 绘制三角形的方式,并且它们都非常好掌握。当然本文仅是抛砖引玉,CSS 日新月异,可能还有一些有意思的方法本文遗漏了,欢迎大家在留言区补充~
使用 border 绘制三角形
使用 border 实现三角形应该是大部分人都掌握的,也是各种面经中经常出现的,利用了高宽为零的容器及透明的 border 实现。
简单的代码如下:
1 2 3 4 5 6 |
|
高宽为零的容器,设置不同颜色的 border:
这样,让任何三边的边框的颜色为 transparent
,则非常容易得到各种角度的三角形:
CodePen Demo - 使用 border 实现三角形
https://codepen.io/Chokcoco/pen/GqrVpB
使用 linear-gradient 绘制三角形
接着,我们使用线性渐变 linear-gradient
实现三角形。
它的原理也非常简单,我们实现一个 45°
的渐变:
1 2 3 4 5 |
|
让它的颜色从渐变色变为两种固定的颜色:
1 2 3 4 5 |
|
再让其中一个颜色透明即可:
1 2 3 |
|
通过旋转 rotate
或者 scale
,我们也能得到各种角度,不同大小的三角形,完整的 Demo 可以戳这里:
CodePen Demo - 使用线性渐变实现三角形
https://codepen.io/Chokcoco/pen/RwKKOZw
使用 conic-gradient 绘制三角形
还是渐变,上述我们使用了线性渐变实现三角形,有意思的是,在渐变家族中,角向渐变 conic-gradient
也可以用于实现三角形。
方法在于,角向渐变的圆心点是可以设置的,类似于径向渐变的圆心点也可以被设置。
我们将角向渐变的圆心点设置于 50% 0
,也就是 center top
,容器最上方的中间,再进行角向渐变,渐变到一定的角度范围内,都是三角形图形。
假设我们有一个 200px x 100px
高宽的容器,设置其角向渐变圆心点为 50% 0
:
并且,设置它从 90°
开始画角向渐变图,示意图如下:
可以看到,在初始的时候,角向渐变图形没有到第二条边的之前,都是三角形,我们选取适合的角度,非常容易的可以得到一个三角形:
1 2 3 |
|
上述代码中的 deeppink 45deg, transparent 45.1deg
多出来的 0.1deg
是为了简单消除渐变产生的锯齿的影响,这样,我们通过 conic-gradient
,也轻松的得到了一个三角形。
同理,再配合旋转 rotate
或者 scale
,我们也能得到各种角度,不同大小的三角形,完整的 Demo 可以戳这里:
CodePen Demo - 使用角向渐变实现三角形
https://codepen.io/Chokcoco/pen/qBRRZJr
transform: rotate 配合 overflow: hidden 绘制三角形
这种方法还是比较常规的,使用 transform: rotate
配合 overflow: hidden
。一看就懂,一学就会,简单的动画示意图如下:
设置图形的旋转中心在左下角 left bottom
,进行旋转,配合 overflow: hidden
。
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者