Fe-interview: [css] 第6天 用css创建一个三角形，并简述原理

[haizhilin2013]

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

[yxkhaha]

            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]

@yxkhaha 能说明下原理吗？

[hbl045]

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

[abin-jb]

CSS 三角形实现原理

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

[Damon99999]

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

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

[poporeki]

<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]

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

[huangd-d]

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

[yandongSS]

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

[J1nvey]

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

[deng302949]

没有人画空心三角型的？

[wowsunny]

第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]

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

[susanforme]

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

[artoriaforDY]

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]

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

• html

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

• css

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

效果图：

解析：

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

[blueRoach]

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

[1415333545]

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

[giggleCYT]

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

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

[Miaamen]

• 将宽高设为0

• 设置上下左右四个border的宽度，并将类型设为 solid

• 其中三个颜色设置为 transparent ，剩余一个设置可见颜色

• 就可以实现三角形的效果。

[LancelotSaki]

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

[yangyingwx]

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

1. 用背景颜色渐变实现

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

效果图：

1. 用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%);
}

效果图：

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

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

效果图：