css3 三角形的画法及实现过程原理

时间:2021-6-12 作者:qvyue

先看效果图和代码:

css3 三角形的画法及实现过程原理
FC3F9155-B566-4C29-9075-87707155F6DA.png


    
        


        .triangle_up{
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .triangle_down{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .triangle_left{
            width: 0;
            height: 0;
            border-right: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .triangle_right{
            width: 0;
            height: 0;
            border-left: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .float_left{
            margin:20px;
            float:left;
        }
    

实现过程:

css3 三角形的画法及实现过程原理
387AA397-EC3F-40FE-A4DC-BF23FD2C6560.png

1–对应样式

.triangle_up {
    width: 100px;
    height: 100px;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
    border-top: 50px solid blue;
}

2-对应样式

.triangle_up {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
    border-top: 50px solid blue;
}

3-对应样式

.triangle_up {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
    border-right: 50px solid yellow;
}

4-对应样式

.triangle_up {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

三角形画好后,调整boder 宽度可以随意改变三角形形状。当4中去掉boder-left属性后,可以绘制直角三角形,与设定 border-left: 0px solid transparent 效果一致。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。