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

先看效果图和代码：

FC3F9155-B566-4C29-9075-87707155F6DA.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style scoped="scoped">
        .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;
        }
    </style>
    <body>
        <div class="triangle_up float_left" ></div>
        <div class="triangle_down float_left"></div>
        <div class="triangle_left float_left"></div>
        <div class="triangle_right float_left"></div>
    </body>
</html>

实现过程：


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 效果一致。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容