使用CSS实现三角形-转

  • 作者:王颖博
  • 最后编辑:2015年08月12日
  • 标签: triangle

类似三角形的形状的元素在网页中是比较常用的,我们可以用图片或者CSS元素达到我们想要的效果。这里主要是讲自己使用HTML+CSS实现三角形的一点心得。

为了能够熟悉的使用HTML+CSS构建三角形,我们首先要熟悉以下代码以及代码所实现的效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>shape</title>
  <style type="text/css">
      .shape{
        height: 0;
        width: 0;
        border-top: 100px solid red;
        border-right: 100px solid blue;
        border-bottom: 100px solid yellow;
        border-left: 100px solid green;
      }
  </style>
</head>
<body>
  <div class="shape"></div>
</body>
</html

这是一个HTML页面,我们定义一个class=shape的元素,为元素设置宽度和高度均为0,上下左右的border为100px并且用不同颜色填充,最终会有以下效果:

可以观察到,上下左右的border都占有45度直角三角形区域,底为100px+100px,高为100px。

如果我们希望实现如下图的三角形形状:

我们可以保留如下图中1或者2的位置:

我选择1区域,最终CSS如下:

1
2
3
4
5
6
7
.shape01{
  height: 0;
  width: 0;

  border-top: 100px solid transparent;
  border-right: 100px solid blue;
}

其他情况类似。

希望我的理解方式能对大家有帮助 :)