CSS实现三角形图标的原理
CSS实现三角形图标的原理
困觉的曼巴er 发表于2年前
CSS实现三角形图标的原理
  • 发表于 2年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了)

之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。

看了下源码是这样的:

.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

 研究一番之后,发现原理是这样的:

首先,需要把元素的宽度、高度设为0。

然后设置边框样式。最关键的也在这里。

这里我们先做一个实验,如果一个元素具有下列样式:

{
width: 0;
height: 0;
border: 4px solid;
}

 效果是什么?没错是个正方形:

因为元素宽度、高度都为0,只有4px的边框,于是变成了上面的效果。

再来,我们把样式改成下面这样:

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

 这会是什么效果呢?可能你不会想到:

这是为什么呢?我们打个比方,有四块红色和黑色的木板代表元素的四个边框,把他们两横两竖重叠起来,这时候他们在二维平面的投影便成了上面的效果。

说到这里,大家该明白了上面的三角形图标是怎么来的了吧:元素没有下边框,而左右边框又是透明的,相当于只有上图中的上面的黑色三角形部分。

所以,如果我们要做倒立三角形、向右的、或者向左的三角形,只需要为三角形底部设置边框,两腰边框透明即可。

例如:

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

  

另外,如果我们把样式改成这样:

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}

 将得到如下效果:

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 25
码字总数 12169
×
困觉的曼巴er
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: