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

实现一个三角形

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

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

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

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

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

html 复制代码
<!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>

通过上面的了解之后,我们再来看下面一个例子:

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

html 复制代码
<!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>

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

下三角

js 复制代码
<!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的效果如下:

设置transparent的效果如下:

上三角

html 复制代码
<!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>

左三角

html 复制代码
<!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>

右三角

html 复制代码
<!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>

总结

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

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

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

相关推荐
ai小鬼头7 小时前
如何重装旁路由系统并优化AIStarter部署:一步步教程
java·css·github
止观止8 小时前
CSS3 粘性定位解析:position sticky
前端·css·css3
I'mxx8 小时前
【html常见页面布局】
前端·css·html
慧一居士11 小时前
预处理器完整功能介绍和示例演示(LESS/SCSS)
前端·css·css3
你这-坏孩子13 小时前
更改elementui 图标 css content
前端·css·elementui
扶光与望舒呀13 小时前
HTML 标题标签
前端·css·html
sunbyte15 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleClickHeart(双击爱心)
前端·javascript·css·vue.js·tailwindcss
周不凢15 小时前
css 边框颜色渐变
前端·css
Hide Asn18 小时前
css-css执行的三种方式和css选择器
前端·css
q5673152319 小时前
使用aiohttp实现高并发爬虫
javascript·css·爬虫·python