在这里留下心情
0%

Css Draw Triangle

Posted on Edited on

今天在知乎上看到这样的一个问题：有谁能详细讲一下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