HTML + CSS 连载 | 40 - border 图形

一、border 图形实现

实际开发中 border 属性主要是用来给盒子添加边框的，但是在开发中我们也可以利用边框的一些特性来实现一些形状，比如一些页面中常用到的三角形等。

接下来我们可以使用 border 属性来实现一个三角形，首先创建 HTML 页面，添加一个盒子，并且给盒子设置一个边框，具体代码如下：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      background-color: #f00;
      
      border: 30px solid olivedrab;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开 HTML 页面，具体效果如下：

此时盒子所占据的宽度为 (100+30+30)px，我们需要设置 box-sizing 属性的属性值为 border-box，让盒子所占据的宽度包含内容和边距的长度，具体 CSS 代码如下所示：

CSS 复制代码

.box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #f00;

  border: 30px solid olivedrab;

  box-sizing: border-box;
}

刷新页面，效果如下：

可以看到盒子变小了，接下来我们需要设置 border 四条边的样式，给每条边一个不同的背景颜色，具体 CSS 代码如下：

CSS 复制代码

.box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #f00;

  border: 30px solid olivedrab;
  border-right-color: blue;
  border-bottom-color: aqua;
  border-left-color: blueviolet;

  box-sizing: border-box;
}

刷新页面，效果如下：

接着我们尝试把增加 border 的宽度为 40px：

CSS 复制代码

border: 40px solid olivedrab;

刷新页面，效果如下：

再次增加 border 的宽度为 50px：

CSS 复制代码

border: 50px solid olivedrab;

刷新页面，效果如下：

可以看到此时内容的宽度已被压缩为0，整个盒子所占据的宽度就是 border 的宽度，设置其他几条变为透明，具体 CSS 代码如下：

CSS 复制代码

.box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #f00;

  border: 50px solid olivedrab;
  /* border-right-color: blue;
  border-bottom-color: aqua;
  border-left-color: blueviolet; */
  /*设置为透明*/
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;

  box-sizing: border-box;
}

再次刷新页面，效果如下：

还需要将背景颜色也设置为透明，或者干脆不设置背景颜色：

CSS 复制代码

background-color: transparent;

再次刷新页面，效果如下：

可以看到我们已经实现了一个三角形，我们可以通过调整边框的宽度来实现大小不同的三角形。

二、border 图形旋转

实现了三角形之后还可以通过 transform 属性来让三角形选中，比如设置如下 CSS 代码：

CSS 复制代码

/*旋转*/
transform: rotate(90deg);

刷新页面，效果如下：

可以看到三角形旋转了 90 度，我们也可以设置旋转的中心点，比如下面 CSS 代码所示：

CSS 复制代码

/*旋转*/
transform: rotate(90deg); 
transform-origin: center 25%;

再次刷新页面，效果如下：

可以看到此时旋转后的位置与不设置中心点之前旋转的位置发生了偏移，当然我们也可以设置旋转更大的角度，比如下面的 CSS 代码：

CSS 复制代码

/*旋转*/
transform: rotate(180deg); 
transform-origin: center 25%;

刷新页面，效果如下：

利用 border 或者 CSS 特性我们可以做出很多图形，可以通过这个网站来查看更多的图形的实现。