CSS绘制三角形原理及应用

在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:“这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢???”

在此我个人的选择一般都是,用 CSS 实现,当然切图然后实现也是聪明人的办法,但是我觉得学好一个技术最关键的不是学习,而是使用。学了不用都是假把式。学了 CSS 有机会让你炫技,不用是大傻

最常见的一类小图标就是三角形,今天我来总结一下用 CSS 实现三角形的原理。网上相关资料较多,讲的也都很好,个人博客主要还是用于记录分享,毫无商业前景,不喜勿喷

原理

CSS 盒模型

盒子模型包括了:margin-border-padding-content

其中,在上下左右的边框交界处,都形成了斜线,利用这一特性,我们可以通过设置不同的上下左右边框的宽度和颜色,可以得到小三角、小梯形等;调整宽度大小可以调节三角形的形状

应用

示例 1

我们首先尝试上下左右颜色区分,并将 border 的宽度给大一点,看看效果

div {
  height: 30px;
  width: 30px;
  border-width: 30px;
  border-style: solid;
  border-color: #cd1076 #bf3eff #b3ee3a #6495ed;
}
在这里插入图片描述

示例 2

接下来我们把 content 宽度设置为 0

div {
  height: 0;
  width: 0;
  border-width: 30px;
  border-style: solid;
  border-color: #cd1076 #bf3eff #b3ee3a #6495ed;
  overflow: hidden; /* 这里设置overflow, font-size, line-height */
  font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
  line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
}
在这里插入图片描述

这时我们可以看到,已经出现了四个颜色不同的三角形了。

示例 3

接下来我们把其中三种颜色设置为和背景颜色一样,只保留一种颜色的对比,代码如下:

div {
  height: 0;
  width: 0;
  border-width: 30px;
  border-style: solid;
  border-color: #cd1076 transparent transparent transparent;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
在这里插入图片描述

IE6 下

在 IE6 下,不支持透明,需要将余下三条边的 border-style 设置为 dashed 即可。

代码如下:

div {
  height: 0;
  width: 0;
  border-width: 30px;
  border-style: solid dashed dashed dashed;
  border-color: #cd1076 transparent transparent transparent;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

示例 4

同理,我们消去相邻的两个三角形,会得到一个以对角线为斜边的大三角形

div {
  height: 0;
  width: 0;
  border-width: 30px;
  border-style: solid dashed dashed dashed;
  border-color: #cd1076 #bf3eff transparent transparent;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
在这里插入图片描述

示例 5

这样我们设置 border-width 为不同的值:

div {
  height: 0;
  width: 0;
  border-width: 20px 40px 30px 20px;
  border-style: solid;
  border-color: #cd1076 transparent transparent transparent;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

效果如下:

在这里插入图片描述

就是说我们只要设置不同的宽度值,可以得到任意形状的三角形,完美

注意:用来绘制三角形的必须是 block 元素

暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
这个CHINQ她就是逊辣~
nmsl
WDNMD
可可爱爱,没有脑袋
哇O7I2我爱你~
啊西巴!
23333~
66666~
(ಥ_ಥ)是在下输了
(๑•ัω•็๑)迷の感动
我从未见过如此厚颜无耻之人(´இ皿இ`)
这么可爱一定是蓝孩纸!╰ひ╯
好无聊,我看了300遍就关了(。•ˇ‸ˇ•。)
bilibili- ( ゜- ゜)つロ 乾杯~
高产似母猪(ˉ(∞)ˉ)
闲的蛋痛的CHINQ用一小时肝出了这个鬼东西
Source: gitee.com/PassionPenguin/ARU
Source: t.me/addstickers/CoronaEmoji
Source: t.me/addstickers/frightened
颜文字
Emoji
小恐龙
花!
弹幕!
aru
Corona Emoji
吓得我都...
上一篇
下一篇