likes
comments
collection
share

css篇-实现一个三角形(border属性)

作者站长头像
站长
· 阅读数 77

实现一个三角形

哈喽呀~小伙伴们，今天继续摸鱼，公司已经欠我快20天的工资了，那就继续摸鱼。

在开始之前，如果作者有不对的地方或者有更好的方法请多多指教。

不卖关子，今天我们要实现的三角形是用border属性来完成的.

border属性相信大家都不陌生，在给一个盒子设置边框的时候我们都会用到border这个属性，你是不是以为边框就是由矩形组成的？实际上由三角形组成的。我们会认为边框是由矩形组成的，是因为我们平时在给盒子设置边框的时候，往往设置的都会比较窄，也就是给定的值比较小，我们一般会设置1px，2px。

上面废话这么多，结合下面的例子相信你们就能明白了：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: space-between;
      }
      div {
        margin-top: 20px;
      }
      .small {
        width: 100px;
        height: 100px;
        border: 1px solid;
        border-color: black red;
      }
      .middle {
        width: 100px;
        height: 100px;
        border: 50px solid;
        border-color: black red;
      }
      .big {
        width: 100px;
        height: 100px;
        border: 200px solid;
        border-color: black red;
      }
    </style>
  </head>
  <body>
    <div class="small">给border设置一个相对小的值</div>
    <div class="middle">给border设置一个相对中间的值</div>
    <div class="big">给border设置一个相对大的值</div>
  </body>
</html>

css篇-实现一个三角形(border属性) 通过上面的了解之后，我们再来看下面一个例子：

在这里我们将元素的宽高都设置为0，来看看通过设置border属性绘制出来的效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: black red blue palegreen;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

css篇-实现一个三角形(border属性)

上面的例子中，我们给容器的border属性设置的四个方向的值都为100，我们明显看到这个容器是由四个三角形组成，所以，我们要实现出三角形，就可以通过这个border属性来完成。

下三角

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 0;
        height: 0;
        border-top: 100px solid palegoldenrod;
        // border-left和border-right不设置transparent属性，则为下面第一个效果图
        border-left: 100px solid transparent; 
        border-right: 100px solid transparent;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

不设置transparent的效果如下： css篇-实现一个三角形(border属性)

设置transparent的效果如下：

css篇-实现一个三角形(border属性)

上三角

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 0;
        height: 0;
        border-bottom: 100px solid palegoldenrod;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

css篇-实现一个三角形(border属性)

左三角

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 0;
        height: 0;
        border-left: 100px solid palegoldenrod;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

css篇-实现一个三角形(border属性)

右三角

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 0;
        height: 0;
        border-right: 100px solid palegoldenrod;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

css篇-实现一个三角形(border属性)

总结

实现一个三角形，我们可以通过border属性和transparent实现，当要实现某一个方向的三角形时，我们记住三个步骤

  1. 设置三角形需要方向的border以及三角形的颜色。
  2. 设置三角形需要方向的反方向的border为0。
  3. 设置除了第二点外的其他方向的颜色为transparent。

还是那句话，请小伙伴多多指教~

转载自:https://juejin.cn/post/7272395084259229756
评论
请登录