0%

Css Draw Triangle

今天在知乎上看到这样的一个问题:有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂?,一下来了兴趣就去回答了。

这题里面有个答案已经回答的不错,不过感觉细节还是欠缺一些,所以笔者针对一些细节来讲解下。

首先我们来看下一个 标准的 box model 的 border 是怎样的:

Box Model

每部分的border,只有一个小梯形,以 border-left 为例,所占的部分由两条对角线(部分),以及上下底组成。空白的中间部分由 content 和 padding 组成。接着往下看(这里我们默认 padding 都为 0px),如果我们把 width 设置为 0px 之后,这个 box model会有怎样的变化:

no width

你会发现,怎么 border-top 和 border-bottom 已经变成一个三角形啦,然后接着把 height 设置为 0px呢?

no height

css 画三角形的原理就是上面讲到的,所做就是需要设置 width: 0px; height: 0px,然后设置诸如合理 border-(left|top|bottom|right)-width 以及对应的颜色,然后再把你想要隐藏的隐藏就行了,题主可以试着想一下,如果没有 border-top 或者 border-bottom 或者 border-left 或者 border-right (设置相应的 width 为 0px),上面的图形会接着怎么改变,可以到这里来尝试一下 Edit fiddle - JSFiddle,还可以想下如果同时没有 border-top 和 border-bottom 会是怎么样的。

  • Css triangles
1
2
3
4
5
6
.left-right-triangle {
width: 0px;
height: 0px;
border-left: 50px solid red;
border-bottom: 50px solid transparent;
}

left-right-triangle

1
2
3
4
5
6
7
.left-triangle {
width: 0px;
height: 0px;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

left-triangle

1
2
3
4
5
6
7
.down-triangle {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

down-triangle

1
2
3
4
5
6
7
.up-triangle {
width: 0px;
height: 0px;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

up-triangle

1
2
3
4
5
6
7
8
.rotate-triangle {
width: 0px;
height: 0px;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
transform: rotate(30deg);
}

rotate-triangle