0
点赞
收藏
分享

微信扫一扫

CSS实现三角形

芭芭蘑菇 2024-03-15 阅读 22

使用 border 

【解释】不设置宽高,用边框大小控制三角型大小

【分解步骤】

设置一个div不设宽高

【示例】

<style>
    #triangle{
        width: 0;
        height: 0;
        border: 100px solid;
        border-color: orangered skyblue gold yellowgreen;
    }
</style>


2. 设置透明

留下想要指向方向相反的边框设定,其他方向的边框设为transparent透明

【示例】实现指向向上的三角形

<style>
    .Up{
        width: 0;
        height: 0;
        border-top: 100px solid transparent; 
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-bottom: 100px solid orangered;
    }
</style>


举报

相关推荐

使用css实现三角形?

css写三角形

css制作三角形

CSS绘制三角形

CSS画三角形

css画三角形

CSS三角形绘制

CSS系列之实现三角形

CSS绘制各种三角形

0 条评论