忍法丶Css三角形绘画术

前言

像我们平常的前端工作中,经常会遇到各种各样的需求,比如有时候需要实现三角形,可能有的童鞋会直接让设计给图实现,但是我们是有追求有逼格的Geeker(码农),最好实现方法还是使用Css,既环保又安全,下面我们学习下怎么用Css完成一些普遍的三角形需求~

文中demo可以在我的github仓库的blog Demo仓库找到。

Border实现三角形的原理

  • 首先聊起元素边框,大多数人都觉得边框是矩形的,其实并不是,先看下面这个demo:

triangle2

  • 我们只设置了少量的边框宽度及content宽高,注意看边框,是不是还明白跟我们这次的主题有什么关系,心急吃不了热豆腐(滑稽),别急再看下面这个demo:

triangle3

  • 这次我们把content的宽高都改成了0,内容没了后,就变成了下面这副模样,看!边框变成了三角形,也就是说在失去content及padding等border内层级宽高后border终于露出了原形,那么我们就可以利用这个来完成我们想要的三角形啦~(机智)

triangle4

  • 我们把上右左的边框颜色透明后就得到了一个绿的发光的三角形啦~所以明白了吧!利用border绘画三角形的原理就是这样实现的。

我们再练习下吧

triangle_up

source code:

1
2
3
4
5
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #469af5;

triangle_down

source code:

1
2
3
4
5
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #469af5;

triangle_left

source code:

1
2
3
4
5
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #469af5;
border-bottom: 50px solid transparent;

triangle_right

source code:

1
2
3
4
5
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #469af5;
border-bottom: 50px solid transparent;

  • 上面几个例子理解了其它形状的三角形也就不难完成了(上下左右BABA),我们聊聊天气泡三角形怎么制作吧~! 上代码~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// style
.triangle1 {
display: inline-block;
position: relative;
width: 300px;
height: 150px;
border-radius: 20px;
background-color: #469af5;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 18px;
letter-spacing: 0.05em;
}

.triangle1::before {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: -30px;
right: 40px;
border-width: 30px 30px 0 0;
border-color: #469af5 transparent transparent transparent;
border-style: solid;
}

//html
<div class="triangle1">James is a handsome boy.</div>

triangle1

这里我们利用了伪元素来绘画小三角,其实一般运用最多也是利用伪元素来完成一些需求,通过绝对定位来定位位置,border-width来控制形状,是不是很简单,多试试就懂啦~!

如果你真的很忙,不想敲代码想快速ctrl+c和ctrl+v实现,戳这进入生成三角形代码,也是美滋滋的途径哈哈!

总结

今天分享的东西就这么简单,Css其实很强大,很多东西效果都可以实现,不要过于依赖图片去完成需求,往后我们再一起学习其他好玩的东西,一起成长一起进步!溜了溜了~

run

感谢您的阅读,本文由 James 版权所有。如若转载,请注明出处:James(http://jamescathy.top/2018/10/01/css_triangle/
ETH钱包备份及导入