在很多网页中经常会有三角形角标作为导航指示器使用,比如 sketch 官网就有如下图
注意 licensing 前面的三角形角标,那么他是如何实现的呢,让我们一起来探索下吧!
对于一个常规的 div 框而言,给其设置正常宽高,并设置 border
- .div__custom {
- position: relative;
- width: 32px;
- height: 32px;
- border - top: 32px solid red;
- border - bottom: 32px solid black;
- border - left: 32px solid yellow;
- border - right: 32px solid blue;
- }
为了方便展示,这里的 border 设置了不同属性
来看看会得到什么样式吧
如图所示,会有一个正常显示的方框,其外上下左右各有 border,而对于每一个角所多出的则由相邻两个 border 平分
那么,如果我们把 div 设置成高度为 0 会怎么样呢
- .div__no__height {
- position: relative;
- width: 32px;
- height: 0px;
- border - top: 32px solid red;
- border - bottom: 32px solid black;
- border - left: 32px solid yellow;
- border - right: 32px solid blue;
- }
方形只剩一条横线
同理,如果设置 width 为 0,height 仍为 32px,那么会发现这个 div 框神奇得被拉高啦,变瘦啦
细思一下,如果没有宽高会怎么样,哇 世界上会存在一个没有尺寸的物体吗
- .div__neither {
- position: relative;
- width: 0px;
- height: 0px;
- border - top: 32px solid red;
- border - bottom: 32px solid black;
- border - left: 32px solid yellow;
- border - right: 32px solid blue;
- }
竟然全变成三角形了,好吧,这是意料之中的事。
咦,这么说的话,我好像想到了怎么去绘制一个三角形角标了
- .div__triangle {
- position: relative;
- width: 0px;
- height: 0px;
- border - top: 32px solid transparent;
- border - bottom: 32px solid transparent; //设置上边框和下边框为透明border-left:32px solid yellow;}
设置上方和下方的 border 为透明,左边的仍然留着就会发现,三角形已经出来啦,当然,不止这一种,其他的留待慢慢尝试
再来过一遍流程
哎,这个三角形好像和我们想象中的不一样,喔 对了好像我们要的是等边三角形对吧
喔喔是喔,让我想想勾股定理
- .div__triangle__beautiful {
- position: relative;
- width: 0px;
- height: 0px;
- border - top: 32px solid transparent;
- border - bottom: 32px solid transparent;
- border - left: 55.36px solid yellow;
- }
55.36 怎么来的
就是 32*1.732
1.732 怎么来的
查查根号表
当当当当….
等边三角形来啦!
是不是换个颜色 缩小点就能用啦!
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-31/19732757.html