[css] 第6天用css创建一个三角形，并简述原理 #17

haizhilin2013 · 2019-04-21T20:57:05Z

第6天用css创建一个三角形，并简述原理

yxkhaha · 2019-04-22T14:14:38Z

            width: 0;
            height: 0;
            margin: 100px auto;
            border-top: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid red;

haizhilin2013 · 2019-04-22T14:24:51Z

@yxkhaha 能说明下原理吗？

hbl045 · 2019-05-05T12:59:40Z

原理是宽高是两边固定，border不一样，有颜色，且有top、right、bottom、left的选项进行修改。在使用的时候需要宽高为零。三角形就需要数学知识（勾股定理），去考虑为等边、全等。重点是思考

abin-jb · 2019-06-15T06:47:26Z

CSS 三角形实现原理

宽高设为0，四个边框设置border-width，border-style，border-color即可，如果某个三角要变为透明，设置border-color为transparent

Damon99999 · 2019-06-18T06:58:37Z

    background-color: #d9dbdd;
    height: 200px;
    width: 200px;
    border-radius: 25px;
    transform: rotate(45deg);
    transition: background-color .3s;
    z-index: 0;

大家可以不看我上面代码，我的思想是做一个正方形然后进行旋转，将多余切除

poporeki · 2019-07-04T15:11:38Z

<div class='rect'></div>
<style>
    .rect {
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid rgb(34, 230, 220);
      border-left: 100px solid rgb(202, 146, 25);
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid rgb(16, 204, 101);
    }
  </style>

创建一个div，宽高都为0，实现效果如下，发现border的四个边都是一个三角形，要实现三角形只需将其中几个边background设置为transparent，即可得到三角形

  <style>
    .rect {
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid transparent;
    }
  </style>

NeverLoseYourWay · 2019-08-03T02:27:47Z

http://caibaojian.com/css-border-triangle.html

huangd-d · 2019-08-28T16:45:30Z

利用边框实现，是因为bfc 盒模型。因为盒模型是一个长方形。边框是在原盒模型上面外面在实现成长方形。所以相邻两个边框之间边框的夹角是90度。

yandongSS · 2019-09-02T15:48:20Z

宽高设置一定数值，就明白了，就像木匠做相框，连接处都会锯成45度角，

J1nvey · 2019-09-05T03:00:48Z

https://www.jianshu.com/p/9a463d50e441
这个挺好理解的

deng302949 · 2019-09-17T06:33:08Z

没有人画空心三角型的？

wowsunny · 2019-11-26T12:11:44Z

第6天用css创建一个三角形，并简述原理

.parent {
        border: 1px solid black;
        width: 100px;
        height: 100px;
    }
    
    .child {
        width: 0px;
        height: 0px;
        content: "";
        display: block;
        position: relative;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid chartreuse;
    }

nikolausliu · 2019-11-28T02:55:26Z

width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: orange;

susanforme · 2020-02-03T06:49:42Z

width:0px;
  height:0px;
  border:50px transparent solid;
  border-bottom:50px solid Red;

artoriaforDY · 2020-04-22T02:12:02Z

border-top: 50px solid blue;
border-left: 50px solid #7a7abd;
border-right: 50px solid #d8ff00;
border-bottom: 50px solid red; width:0;height:0;用四个颜色就能看出来为什么了

ylqymm · 2020-05-20T00:58:03Z

以尖角朝下的三角形为例：

html
```
<div class="box"></div>
```

css

  .box{
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: skyblue;
    }

效果图：

解析：

让容器的宽高都为0，
设置三角形的大小(设置border的像素，颜色设为透明)，
如果想让尖角朝下，就设置border-top-color即可(与实际方向是反的，因为透明的原因)；如果想让尖角超左，设置border-right-color即可。

blueRoach · 2020-05-20T07:46:14Z

            width: 0;
            height: 0;
            border-bottom: 5px solid;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;

1415333545 · 2020-05-27T03:04:28Z

可以使用裁剪：
background: red;
height: 200px;
width: 200px;
clip-path: polygon(100% 100%, 0 0, 100% 0);

giggleCYT · 2020-05-30T09:54:22Z

  <style>
        div {
            width: 0;
            height: 0;
            border: 50px solid;
            border-color: transparent transparent red;
        }
    </style>

一个盒子包括: margin+border+padding+content
上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
调整宽度大小可以调节三角形形状.

Miaamen · 2020-06-16T02:51:24Z

将宽高设为0
设置上下左右四个border的宽度，并将类型设为 solid
其中三个颜色设置为 transparent ，剩余一个设置可见颜色
就可以实现三角形的效果。

LancelotSaki · 2020-07-01T01:58:39Z

第一个就想到clip-path，用border不会。

yangyingwx · 2020-09-10T07:38:01Z

用盒子border实现的上面已经讲得很详细了，就不赘述了，这里补充几个歪门邪道的方法。

用背景颜色渐变实现

.triangle {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg,#333, #333 50%,#eee 51%);
}

效果图：

2. 用clip-path剪裁出任意想要的形状

.triangle1 {
    width: 100px;
    height: 100px;
    background: rgb(226, 147, 222);
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

效果图：

3. 用svg作为背景，也是可以编辑出任意的形状

.triangle2 {
    width: 100px;
    height: 100px;
    background-image: url(triangle.svg);
}

效果图：

GodEnd · 2021-03-18T13:32:07Z

.borderBox{
height: 0px;
width: 0px;
border: 100px solid;
border-color:transparent;
border-bottom-color: red;
border-top: 0;
border-left: 0;
}
利用border构成边框的边缘是三角形来构建三角形，把另外两边宽度设置为0，保证两个相邻边的宽度不为零，这样边框才能构成（一边是无法构成边框的）设置盒子高宽为零使盒子内部没有大小只有边框这样边框每个边就是三角形的（如果有宽度为梯形），把其他三边颜色透明就得到一个三角形了。

lxt-ing · 2021-04-14T03:28:42Z

可以用svg或者border去绘制三角形，
1.将元素宽高设为0 ；
2.设置border的宽度及颜色；
3.将其他设置为透明，某一边框颜色设为其他

mono2048 · 2021-05-21T01:04:57Z

.rect {
  width: 0;
  height: 0;
  background-color: #fff;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-top: 100px solid rgb(29, 156, 194);
  border-bottom: 100px solid transparent;
}

amikly · 2021-10-24T16:47:31Z

原理

盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右均分为四个部分

一个盒子包括: margin+border+padding+content

– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.

– 调整宽度大小可以调节三角形形状.

实现

<!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>
      /* 依靠原来盒子的边 */
      #test1 {
        width: 0;
        height: 0;
        /* border-color: #ff9600 #3366ff #12ad2a #f0eb7a; */
        border-color: #ff9600 transparent transparent transparent;
        border-style: solid;
        border-width: 50px 50px 0;
        /* 兼容IE6 */
        overflow: hidden; /* 这里设置overflow, font-size, line-height */
        font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
        line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
        border-style: solid dashed dashed dashed; /* 设置余下三条边的border-style为dashed */
      }
      /* 斜边在盒子的对角线上 */
      #test2 {
        width: 0;
        height: 0;
        border-color: #ff9600 transparent transparent transparent;
        border-style: solid;
        border-width: 40px 40px 0 0;
        /* 兼容IE6 */
        overflow: hidden; /* 这里设置overflow, font-size, line-height */
        font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
        line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
        border-style: solid dashed dashed dashed; /* 设置余下三条边的border-style为dashed */
      }
      /* 空心三角形(伪类实现) */
      #test3 {
        position: relative;

        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 50px 50px;
        border-color: transparent transparent #d9534f;
        /* 兼容IE6 */
        /* overflow: hidden; 这里设置overflow, font-size, line-height */
        font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
        line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
        border-style: dashed dashed dashed solid; /* 设置余下三条边的border-style为dashed */
      }
      #test3:after {
        content: "";
        position: absolute;
        top: 6px;
        left: 0;
        transform: translate(-50%);
        border-style: solid;
        border-width: 0 40px 40px;
        border-color: transparent transparent white;
      }
      /* 带缺口的三角形效果 */
      #test4 {
        position: relative;
      }
      .t {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-width: 0 50px 50px;
      }
      #t1 {
        border-bottom-color: #000;
      }
      #t2 {
        border-bottom-color: #fff;
      }
    </style>
  </head>
  <body>
    依靠原来盒子的边
    <div id="test1"></div>
    斜边在盒子的对角线上
    <div id="test2"></div>
    空心三角形(伪类实现)
    <div id="test3"></div>
    带缺口的三角形效果
    <div id="test4">
      <div class="t" id="t1"></div>
      <div class="t" id="t2"></div>
    </div>
  </body>
</html>

kankan-web · 2022-05-14T14:50:25Z

css绘制三角形主要用到border属性，也就是边框。border属性是右三角形组成的

 .top{
      display: inline-block;
      width: 0;
      height: 0;
      border-bottom:50px solid red;
      border-left: 50px solid transparent;
      border-right:50px solid transparent;
    }
  .left{
      display: inline-block;
      width: 0;
      height: 0;
      border-right:50px solid red;
      border-top: 50px solid transparent;
      border-bottom:50px solid transparent;
    }

www-wanglong · 2022-06-18T07:43:21Z

div {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid transparent;
}

GitHubJiKe · 2022-09-28T09:40:19Z

推荐：clip-path

werty125 · 2022-11-03T02:10:43Z

https://www.jianshu.com/p/9a463d50e441 这个挺好理解的

总结来说就是，border边框不是长方形条状的，而是像画框一样，分割角各45°为梯形状，当内容区域为0时，即全为boder是，上左下右border便为三角形，因此将各方向三角形进行隐藏，修改宽度时，就能得到想要的三角形形状。

lxt-ing · 2022-11-03T02:11:04Z

你的邮件我已收到，我会尽快处理

Iambecauseyouare · 2023-02-13T02:39:40Z

    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;

原理：
边框是实现三角形的部分，但边框实际上并不是直线，当我们将边框放大之后，每条边框都是一个梯形，所以当我们取消边框的时候：
取消一条边的时候，与这条相邻的两条边的接触部分会变成直的；
当仅有邻边的时候，两个边会变成对分的三角；
当保留边没有其他接触时，极限情况所有大小都会消失

gnu-xiaosong · 2023-03-07T06:53:47Z

.square {
            width:10px;
            height: 10px;
            border-top: 150px solid red;
            border-bottom: 150px solid green;
            border-left: 150px solid blue;
            border-right: 150px solid pink;
        }


.rect {

            margin-left: 50px;
            width:0;
            height: 0;
            border-top: 155px solid red;
            border-bottom: 155px solid green;
            border-left: 155px solid blue;
            border-right: 155px solid pink;
        }

原理: 因为面是由各个点连接围起来的，当width(height)设置成0时有两个点重合了，此时就仅有三个点了，进而成为了三角形。

lili-0923 · 2024-02-02T06:05:53Z

div {
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
原理：css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0，仅保留边框 4.得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

zsf1482451437 · 2024-03-08T08:25:16Z

原理

先上口诀：宽高为0，一边为0，两边透明。

元素的border的形成机制是：

在盒子四边由4个三角形拼接而成，最先呈现的是每个三角形底部的内容，当border-width变大后，每个三角形的剩余部分会渐渐出现；

当盒子内容有宽高时，会遮住每个三角形底部之外的部分；

比如

width: 40px;
height: 40px;
border-width: 50px;
border-style: solid;
border-color: red yellow green blue;

当border-width设置过小时，就是平时的场景（只看到每个三角形底部区域）：

width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-color: red yellow green blue;

当盒子宽高设置为0后，每个三角形全部呈现：

width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: red yellow green blue;

如果有一边不设置border-width，就只有三个三角形：

width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: red yellow green #fff;

如果将上下两边的color设置为透明，不就是只看到一个三角形吗：

width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent yellow transparent #fff;

不难发现，不设置border-width那一边就是三角形的方向，三角形方向的方向的邻近两边需要设置透明。

实现口诀：宽高为0，一边为0，两边透明

width: 0;
height: 0;
border-width: 30px 30px 30px 0;
border-style: solid;
border-color: transparent yellow transparent #fff;

haizhilin2013 added the css css label Apr 21, 2019

zivenday mentioned this issue Aug 9, 2019

用 css 创建一个三角形，并简述原理？ zivenday/learning#17

Open

abueavan mentioned this issue Nov 13, 2019

[css] 第33天用CSS绘制一个三角形 #119

Open

[css] 第6天 用css创建一个三角形，并简述原理 #17

[css] 第6天 用css创建一个三角形，并简述原理 #17

Comments

haizhilin2013 commented Apr 21, 2019

yxkhaha commented Apr 22, 2019

haizhilin2013 commented Apr 22, 2019

hbl045 commented May 5, 2019

abin-jb commented Jun 15, 2019

CSS 三角形实现原理

Damon99999 commented Jun 18, 2019 • edited

poporeki commented Jul 4, 2019 • edited

NeverLoseYourWay commented Aug 3, 2019

huangd-d commented Aug 28, 2019

yandongSS commented Sep 2, 2019

J1nvey commented Sep 5, 2019

deng302949 commented Sep 17, 2019

wowsunny commented Nov 26, 2019

nikolausliu commented Nov 28, 2019

susanforme commented Feb 3, 2020

artoriaforDY commented Apr 22, 2020

ylqymm commented May 20, 2020 • edited

blueRoach commented May 20, 2020

1415333545 commented May 27, 2020

giggleCYT commented May 30, 2020

Miaamen commented Jun 16, 2020

LancelotSaki commented Jul 1, 2020

yangyingwx commented Sep 10, 2020

GodEnd commented Mar 18, 2021

lxt-ing commented Apr 14, 2021

mono2048 commented May 21, 2021

amikly commented Oct 24, 2021

原理

实现

kankan-web commented May 14, 2022

www-wanglong commented Jun 18, 2022 • edited

GitHubJiKe commented Sep 28, 2022

werty125 commented Nov 3, 2022

lxt-ing commented Nov 3, 2022 via email

Iambecauseyouare commented Feb 13, 2023

gnu-xiaosong commented Mar 7, 2023 • edited

lili-0923 commented Feb 2, 2024

zsf1482451437 commented Mar 8, 2024

[css] 第6天用css创建一个三角形，并简述原理 #17

[css] 第6天用css创建一个三角形，并简述原理 #17

Damon99999 commented Jun 18, 2019 •

edited

poporeki commented Jul 4, 2019 •

edited

ylqymm commented May 20, 2020 •

edited

www-wanglong commented Jun 18, 2022 •

edited

gnu-xiaosong commented Mar 7, 2023 •

edited