css画三角形

最新推荐文章于 2024-04-27 18:08:06 发布

della_uii

最新推荐文章于 2024-04-27 18:08:06 发布

阅读量674

点赞数

分类专栏： css 文章标签： css triangle

本文链接：https://blog.csdn.net/Della_UI/article/details/59483994

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

这里写图片描述

对应css：

<style type="text/css">
    div{
        width: 0;
        height: 0;
        margin: 10px;
        border: 50px solid;
        line-height: 0; /*兼容ie6(ie6下行高导致左右为梯形)*/
    }
    .triangle_up{
        border-color: transparent transparent orange transparent;
    }
    .triangle_down{
        border-color: orange transparent transparent transparent;
    }
    .triangle_left{
        border-color: transparent orange transparent transparent;
    }
    .triangle_right{
        border-color: transparent transparent transparent orange;
    }
    .triangle_upleft{
        border-color: orange transparent transparent orange;
    }
    .triangle_upright{
        border-color: orange orange transparent transparent;
    }
    .triangle_downleft{
        border-color: transparent transparent orange orange;
    }
    .triangle_downright{
        border-color: transparent orange orange transparent;
    }
</style>