纯CSS画三角原理解析

纯CSS画三角原理解析

由于以前作一个页面出现了不少三角，开始直接用图片感受并非很好用，看着老是怪怪的颜色还很难调整的跟背景同样，就搜了一波代码直接用上了，过后想了一下感受不知道具体原理是什么，很奇怪为何边框能设置成三角的样式。因而搜了一波原理整理以下

1.边框究竟是什么样的？

由于不多用到很粗的边框，并且90%的状况下咱们用边框都是一个颜色的。因此我发现我并不知道边框究竟是什么样子的，一直一来我都觉得四条边都是一条线（不要告诉我就我一我的这样认为）。

实验了一下才发现边框愈来愈粗的时候，很明显每条边都是一个梯形

2.如何作出三角？

由于以前看的代码都会写上width: 0; height: 0;当时不理解为何，如今很容易就能想到，用极限的思惟，当内容大小趋近与零的时候,每一个边就是一个三角了。

这个时候就能够看到三角已经出现，咱们要作的就是把其余边设置为透明的就能够获得咱们须要的三角了。

3.还有没有更多的状况？

经过分别取消边框发现下面几种状况：

• 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
• 当仅有邻边时， 两个边会变成对分的三角
• 当保留边没有其余接触时，极限状况全部东西都会消失。

4.拓展

明白了这些以后，再看代码是否是感受就很清晰了呢？而后咱们就能够作出更多形状的三角。有了这些形状再加上旋转属性，基本全部的场景都能使用。

直角三角

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置三条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-left: transparent solid;
    border-width: 85px; 
    /* 其余设置 无关紧要*/
    margin: 50px;
}

更小的直角三角形

利用对边的状况，作出更小的直角三角形

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其余设置 */
    margin: 50px;
}

等腰锐角三角形

经过更改底边的长度能够作出各类不一样的三角形

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 */
    border-top: #4285f4 170px solid;
    border-right: transparent 85px solid;
    border-left: transparent 85px solid;
     
    /* 其余设置 */
    margin: 50px;
}

对话气泡

把伪元素设置成三角，再经过定位肯定位置，就能够制做出来经典的对话气泡了。

.bubbly {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;

.bubbly:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}

总结

经过对四条边的长度的设置，还能够作出各类各样的三角形，几乎全部三角的形状均可以设置出来。
另外还能够经过设置宽高中的一项为0另外一个不为0，来设置出体形的形状，你们能够自由实验